el-table根据某字段置顶
时间: 2023-07-02 12:20:13 浏览: 182
你可以使用 `sort-method` 属性来实现 `el-table` 根据某字段置顶。
首先,你需要定义一个方法来排序,然后将该方法绑定到 `sort-method` 属性上。例如,如果你想根据 `name` 字段将某些数据置顶,可以这样做:
```vue
<template>
<el-table :data="tableData" :sort-method="sortMethod">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京' },
{ name: '李四', age: 20, address: '上海' },
{ name: '王五', age: 22, address: '广州' },
{ name: '赵六', age: 24, address: '深圳' },
{ name: '钱七', age: 26, address: '成都' }
],
topData: [
{ name: '张三', age: 18, address: '北京' },
{ name: '李四', age: 20, address: '上海' }
]
}
},
methods: {
sortMethod(a, b) {
if (this.topData.includes(a)) {
return -1;
} else if (this.topData.includes(b)) {
return 1;
} else {
return a.name.localeCompare(b.name, 'zh');
}
}
}
}
</script>
```
这段代码中,我们将 `topData` 数组中的数据置顶,然后在 `sortMethod` 方法中判断某个数据是否在 `topData` 数组中,如果是则返回 -1,表示该数据排在前面。如果两个数据都不在 `topData` 数组中,则按照 `name` 字段进行排序。
这样,就可以根据某个字段将某些数据置顶了。
阅读全文