时间戳

首页 > 解决方案 > 将活动类 a 列添加到表中（如在 netflix 中）

vue.js - 将活动类 a 列添加到表中（如在 netflix 中）

问题描述

我需要帮助来选择表头并使用类选择列。就像在 Netflix 中一样。我是 VueJS 的菜鸟

示例 GIF

我的代码是

    <table class="table">
        <thead class="text-center">
            <tr>
                <th scope="col"><button type="button" class="btn plan_columnA selected" @click="planSelect('plan_columnA')">Column A</button></th>
                <th scope="col"><button type="button" class="btn plan_columnB" @click="planSelect('plan_columnB')">Column B</button></th>
                <th scope="col"><button type="button" class="btn plan_columnC" @click="planSelect('plan_columnC')">Column C</button></th>
            </tr>
        </thead>

        <tbody class="text-center">
            <tr>
                <td class="plan_columnA selected">Mark</td>
                <td class="plan_columnB">Otto</td>
                <td class="plan_columnC">@mdo</td>
            </tr>
            <tr>
                <td class="plan_columnA selected">Jacob</td>
                <td class="plan_columnB">Thornton</td>
                <td class="plan_columnC">@fat</td>
            </tr>
            <tr>
                <td class="plan_columnA selected">Larry</td>
                <td class="plan_columnB">the Bird</td>
                <td class="plan_columnC">@twitter</td>
            </tr>
        </tbody>
    </table>

我的风格是

.btn {
    background-color: darkgrey;
    color: white;
}
button.selected {
    background-color: red;
}
td.selected {
    color: red;
}

我尝试这样做，但我不知道它是否正确

export default {
    data () {
        return {
            planSelected: '',
        }
    },

    methods: {
        planSelect (plan) {
            this.planSelected = plan;

            $('.selected').removeClass('selected');
            $('.' + this.planSelected).addClass('selected');
        },
    },
}

我试过 JQuery，但我想在 VueJS 中做。

谢谢！

标签： vue.jsvuejs2vue-component

解决方案

这很容易，我为你做了一个例子，希望它对你有所帮助。它应该更加动态化，以获得更好的概览，但您可以使用我制作的代码。

在理想情况下，您将从数据变量生成所有行/列，而不是手动执行所有这些操作。

https://jsfiddle.net/6aojqm0k/

我所做的只是有 1 个数据变量，您可以设置并检查不同的 tds 和按钮。

data: () => ({
    planSelected: 'plan_columnA'
})

选择计划的按钮：

<button type="button" class="btn plan_columnA" :class="{selected: planSelected === 'plan_columnA' }" @click="planSelected = 'plan_columnA'">Column A</button>

以及要显示的实际列

<td class="plan_columnA" :class="{selected: planSelected === 'plan_columnA' }">Mark</td>

专业提示：切勿将 jQuery 和 VueJS 结合使用 - 只需使用 VueJS

推荐阅读