vue3表格 <el-table-column prop="zip" label="Zip" />怎么控制label的排序
时间: 2023-12-19 10:05:16 浏览: 28
要控制label的排序,需要在<el-table>标签中使用 scoped slots 的方式自定义表头,并在表头中添加排序的事件监听器。
具体实现方法如下:
1. 首先,在<el-table>标签中添加scoped slots,实现自定义表头,如下所示:
```
<el-table :data="tableData" @sort-change="onSortChange">
<el-table-column prop="zip">
<template slot-scope="{ column }">
<span @click="column.order === 'ascending' ? column.order = 'descending' : column.order = 'ascending'">
Zip
<i class="el-icon-arrow-up" v-if="column.order === 'ascending'"></i>
<i class="el-icon-arrow-down" v-if="column.order === 'descending'"></i>
</span>
</template>
</el-table-column>
...
</el-table>
```
2. 在<el-table>标签中添加@sort-change事件监听器,并在事件处理函数中进行排序操作,如下所示:
```
<el-table :data="tableData" @sort-change="onSortChange">
...
</el-table>
...
methods: {
onSortChange({ prop, order }) {
this.tableData = this.tableData.sort((a, b) => {
if (order === 'ascending') {
return a[prop] > b[prop] ? 1 : -1;
} else {
return a[prop] < b[prop] ? 1 : -1;
}
});
}
}
```
这样就可以实现对label的排序控制了。