element ui表格默认正序排列
时间: 2023-06-30 21:17:15 浏览: 46
Element UI 表格默认是按照第一列的升序排列的。如果需要按照其他列或者降序排列,可以通过设置 `sort-by` 和 `sort-direction` 属性来实现。
例如,如果需要按照第二列的降序排列,可以这样设置:
```html
<el-table :data="tableData" :default-sort="{prop: 'column2', order: 'descending'}">
<el-table-column prop="column1" label="Column 1"></el-table-column>
<el-table-column prop="column2" label="Column 2"></el-table-column>
<el-table-column prop="column3" label="Column 3"></el-table-column>
</el-table>
```
其中,`:default-sort` 属性指定了默认排序的列和方向。`prop` 属性指定了列绑定的数据字段。
如果需要动态改变排序,可以在表格的 `sort-change` 事件中处理:
```html
<el-table :data="tableData" :sort-by="sortColumn" :sort-direction="sortOrder" @sort-change="handleSortChange">
<el-table-column prop="column1" label="Column 1"></el-table-column>
<el-table-column prop="column2" label="Column 2"></el-table-column>
<el-table-column prop="column3" label="Column 3"></el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ column1: 'A', column2: 3, column3: 'X' },
{ column1: 'B', column2: 2, column3: 'Y' },
{ column1: 'C', column2: 1, column3: 'Z' }
],
sortColumn: 'column2',
sortOrder: 'descending'
}
},
methods: {
handleSortChange({ prop, order }) {
this.sortColumn = prop;
this.sortOrder = order;
// 根据新的排序规则重新获取数据
// ...
}
}
}
```
在 `handleSortChange` 方法中,可以根据新的排序规则重新获取数据。其中,`prop` 表示排序的列名,`order` 表示排序的方向,可以是 `ascending` 或 `descending`。