在排序标题列上使用 vue 添加和删除类答案

【问题标题】：on sort header column add and remove classes using vue在排序标题列上使用 vue 添加和删除类
【发布时间】：2019-12-21 23:04:43
【问题描述】：

我有一个表格，想使用 vue 为表头创建自定义排序。

表格的表头如下所示：

<tr>
    <th data-sort="name" class="sort">Product Name</th>
    <th class="">Url</th>
    <th data-sort="status" class="sort">Status</th>
    <th class="">Actions</th>
</tr>

头部在vue中生成：

<tr>
    <th v-for="data in headerData" :class="{ sort: data.sort }" :data-sort="data.sort ? data.sortLabel : false" @click="data.sort ? sortColumn($event) : null">{{ data.name }}</th>
</tr>

点击事件：

 sortColumn(event) {
        let column = event.target;
        let data = column.getAttribute('data-sort');

        // change the clases 

        // send and get data from the server sorted
    }

我感兴趣的是前端部分（更改标题的类）

有 3 个类：sort、sort-asc、sort-desc

点击产品名称标题时的EX： 1）在第一次点击类排序必须替换为 sort-asc 2）在第二次点击类 sort-asc 必须替换为 sort-desc 3) 在第三次点击类 sort-desc 必须替换为 sort。

但是一直以来，当我单击状态标题时...其他列标题必须重置类以进行排序（如果还有另一个活动）

一次只能搜索一列。

任何想法如何使用 vue 或 vanilla javascript 做到这一点？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

这段代码可以完成这项工作....我相信有一个更优雅的解决方案....但是可以工作:)

sortColumn(event) {
        let column = event.target;
        let data = column.getAttribute('data-sort');
        let activeSortClass = column.className;

        let sortColumns = document.querySelectorAll('#filterDataTable tr th[data-sort]');
        for (let i = 0; i < sortColumns.length; i++) {
            sortColumns[i].classList.remove('sort','sort-asc', 'sort-desc');
            sortColumns[i].classList.add('sort');
        }

        column.classList.remove('sort');

        if(activeSortClass === 'sort-asc') {
            column.classList.add('sort-desc');
        } else {
            column.classList.add('sort-asc');
        }

        console.log(data + ' ' + column.className);
    }

【讨论】：