场景:后端排序
html
<el-table
:data="systemTagList"
border
style="width: 100%"
:default-sort="{ prop: 'UsedCount', order: 'descending' }"
@sort-change="sortChange" //排序函数
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="标签名"></el-table-column>
</el-table-column>
<el-table-column prop="UsedCount" label="使用次数" sortable="custom"></el-table-column>
</el-table>
js(排序函数)
//排序
sortChange(column) {
let { order } = column;
if (order === 'ascending') {
this.usedCountSort = 2;
} else {
this.usedCountSort = 1;
}
},
js(监听变化)
watch: {
usedCountSort: {
handler(newValue, oldValue) {
if (newValue != oldValue) {
this.refreshSystemTagList();
}
},
},
},
js(接口请求)
async getSystemTagList(page, page_size, callback) {
let res = await this.$api.Tag.getSystemTagList({
page: page,
limit: page_size,
search: this.search,
public: true,
createdType: this.createdType,
usedCountSort: this.usedCountSort,
});
},