element ui sort
时间: 2023-07-29 19:12:02 浏览: 47
Element UI 是一个基于 Vue.js 的 UI 组件库,它提供了一系列的可复用的组件,其中包括了排序功能。
在 Element UI 中,可以使用 `el-table` 组件来展示表格数据,并且支持对表格的数据进行排序。通过设置 `:sort-method` 属性,可以自定义排序的方法。
以下是一个示例代码,演示如何在 Element UI 中使用排序功能:
```html
<template>
<el-table
:data="tableData"
:default-sort="{ prop: 'name', order: 'ascending' }"
@sort-change="handleSortChange">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="性别" prop="gender"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
]
};
},
methods: {
handleSortChange({ prop, order }) {
// 自定义排序方法
this.tableData.sort((a, b) => {
if (order === 'ascending') {
return a[prop] - b[prop];
} else {
return b[prop] - a[prop];
}
});
}
}
};
</script>
```
在上述代码中,`el-table` 组件用于展示表格数据,`el-table-column` 用于定义表格的列。通过设置 `:default-sort` 属性,可以设置默认的排序字段和排序方式。在 `@sort-change` 事件中,可以通过自定义排序方法对表格数据进行排序。
以上就是在 Element UI 中使用排序功能的简单示例,你可以根据自己的需求进行扩展和定制。