在调用table 排序时,出现排序有三种状态:
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
案例如下:
<el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%;cursor: pointer;" :default-sort = "{prop: 'name', order: 'ascending'}" @sort-change="handleSortChange"> <el-table-column label="上次更新" prop="last_modification_times" sortable width="100"> </el-table-column> </el-table>
@sort-change 事件:表格的排序条件发生变化的时触发,参数 { column, prop, order }, 分别代表的意义是:
column:当前列
prop:当前列需要排序的数据
order:排序的规则(升序、降序和默认[默认就是没排序])
handleSortChange(val) { if(val.column){ this.sortOrder = val.order == 'ascending'? 2 : 1 this.sortField = val.prop == 'name'? 2 : 1 //调用排序接口 } // this.$refs.multipleTable.clearSort() },
default-sort属性:
更新 2021.02.17
element-ui 官网现在提供了 sortable 参数:对应列是否可以排序,如果设置为 'custom',则代表用户希望远程排序,需要监听 Table 的 sort-change 事件。
sort-orders:数据在排序时所使用排序策略的轮转顺序,仅当 sortable 为 true 时有效。需传入一个数组,随着用户点击表头,该列依次按照数组中元素的顺序进行排序。数组中的元素需为以下三者之一:ascending表示升序,descending表示降序,null 表示还原为原始顺序。如果不想要默认状态,那只需配置 ['ascending', 'descending'] 即可。