以上就是本篇文章【element-table排序icon没有点亮】的全部内容了，欢迎阅览 ！ 文章地址：http://sjzytwl.xhstdz.com/quote/86417.html
栏目首页
相关文章
动态
同类文章
热门文章
网站地图
返回首页 物流园资讯移动站 http://sjzytwl.xhstdz.com/mobile/ , 查看更多
element-table排序icon没有点亮
2024-12-31 22:19
以下是使用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);
});
}
}