vue.js - 将事件类一列添加到表中(如在 netflix 中)

Question

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

Example 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 来做。

谢谢!

Answer 1

这很简单，我已经为您做了一个 fiddle 示例，希望对您有所帮助。它应该更加动态，以获得更好的概览，但您可以尝试使用我编写的代码。

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

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