element-ui table排序
时间: 2023-12-07 18:38:53 浏览: 179
以下是使用element-ui table进行排序的方法:
1. 在el-table-column中添加sortable属性,并将其设置为true,例如:
```html
<el-table-column prop="name" label="姓名" sortable></el-table-column>
```
2. 在el-table上添加@sort-change事件,该事件会在表格排序发生变化时触发,例如:
```html
<el-table :data="tableData" @sort-change="handleSortChange">
```
3. 在methods中添加handleSortChange方法,该方法会接收一个对象作为参数,其中包含了排序的字段和排序的顺序,例如:
```javascript
methods: {
handleSortChange(sort) {
console.log(sort.prop); // 排序的字段
console.log(sort.order); // 排序的顺序,值为'ascending'或'descending'
}
}
```
4. 在handleSortChange方法中根据排序的字段和顺序对表格数据进行排序,例如:
```javascript
methods: {
handleSortChange(sort) {
this.tableData.sort((a, b) => {
const field = sort.prop;
const order = sort.order === 'ascending' ? 1 : -1;
return order * (a[field] > b[field] ? 1 : -1);
});
}
}
```
阅读全文