以下是使用
element-ui
table进行
排序的方法:
1. 在
el-
table-column中添加sor
table属性,并将其设置为true,例如:
```html
<
el-
table-column prop="name" lab
el="姓名" sor
table></
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) => {
co
nst fi
eld = sort.prop;
co
nst order = sort.order ===
'ascending
' ? 1 : -1;
return order * (a[fi
eld] > b[fi
eld] ? 1 : -1);
});
}
}