我正在做一个小项目,我想做的是当排序发生@click
事件时,sortcol
列被赋予asc,desc,but,我想做的是这样的,我想清除除被点击列以外的其他列的值。
我想不出该怎么做。
<template>
<table>
<thead>
<tr>
<th v-for="th in tableHeader" :key="th">
<div class="flex" @click.prevent="sortByColumn(th.name)">
<div class="sort-header-content">{{ th.text }}</div>
<div v-if="sortcol[th.name]==='asc'">ArrowDownIcon</div>
<div v-else-if="sortcol[th.name]==='desc'">ArrowUpIcon</div>
</div>
</th>
</tr>
</thead>
</table>
</template>
<script>
export default {
name: "Table",
data() {
return {
columns: [
{name: 'id', text: 'ID'},
{name: 'name', text: 'Name'},
{name: 'position', text: 'Position'},
{name: 'office', text: 'Office'},
{name: 'extension', text: 'Extension'},
{name: 'startdate', text: 'Start Date'},
{name: 'salary', text: 'Salary'},
],
sortcol: {
name: '',
position: '',
office: '',
extension: '',
startdate: '',
salary: '',
},
}
},
methods: {
sortByColumn(column) {
let sortedColumn = this.sortcol[column]
if (sortedColumn === '') {
this.sortcol[column] = 'asc'
} else if (sortedColumn === 'asc') {
this.sortcol[column] = 'desc'
} else if (sortedColumn === 'desc') {
this.sortcol[column] = ''
}
},
},
computed: {
tableHeader() {
return this.columns
},
}
}
</script>
2条答案
按热度按时间3qpi33ja1#
如果
sortcol
对象中有属性,则可以清空该对象:第一个
eh57zj3b2#
首先,从
sortcol
创建一个可用键的数组。然后移除传递给函数的th.name
。在执行for..of循环后,您可以移除sortcol
的值。第一个