element-ui,table列升序、降序
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
element-ui,table列升序、降序
在Element UI的Table组件中,可以使用`sort-method`属性来指定排序时的自定义排序函数。
首先,需要绑定`sort-method`属性到需要排序的列上,在排序函数中,根据需要对数据进行排序。
例如,以下是一个简单的示例,展示如何在Table组件中对某一列进行升序和降序排序:
```html
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
]
};
},
methods: {
sortByName(a, b, order) {
if (order === 'ascending') {
return .localeCompare(); // 升序排序
} else {
return .localeCompare(); // 降序排序
}
}
}
};
```
在上面的示例中,我们将Table的数据绑定到`tableData`属性上,通过设置`sortable`属性,启用对应列的排序功能。对于"
姓名"这一列,我们通过设置`sort-method`属性,将排序方法指定为`sortByName`函数。
在`sortByName`函数中,我们根据`order`参数的值来判断当前
排序的顺序是升序还是降序。然后使用`localeCompare`方法对
姓名进行排序。
这样点击姓名这一列的表头,就可以进行升序和降序的排序了。