vue+elementui 项目 table表格自定义排序规则
在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false。可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。可以使用 sort-method 或者 sort-by 使用自定义的排序规则。如果需要后端排序,需将 sortable 设置为 custom,同时在 Table 上监听 sort-change 事件,在事件回
·
vue+elementui 项目 table表格自定义排序规则
官方解释:
在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false。可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。可以使用 sort-method 或者 sort-by 使用自定义的排序规则。如果需要后端排序,需将 sortable 设置为 custom,同时在 Table 上监听 sort-change 事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。
其实前端排序要使用自定义排序规则也可以将 table 的 el-table-column 标签上 sortable 属性设置为 custom,要不然在排序一些特殊内容的时候就会出现乱象,比如:排序的列都是下拉列表的时候,就会出现乱象问题
<el-table-column
:label="tableItemConfig.label"
:min-width="tableItemConfig.width"
align="center"
:prop="tableItemConfig.prop"
sortable="custom"
>
在 el-table 标签上绑定 sort-change
事件
<el-table
ref="table"
:data="tablePageData"
:show-header="tableConfig.isShowHeader ? tableConfig.isShowHeader : true"
:border="tableConfig.isShowBorder"
:style="tableConfig.tableStyle"
:header-cell-style="tableConfig.headerCellStyle"
:row-style="tableRowStyle"
@sort-change="sort_change"
>
methods: {
sort_change(column) {
this.tablePageData= this.tablePageData.sort(sortFun(column.prop, this.searchDataOrder))
},
// attr 参数表示当前点击的是哪一列,传进来的是点击列的标识
// rev 参数表示的是点击当前列表头之后是升序降序或者null,三种值分别是['ascending', 'descending', null]
sortFun = (attr, rev) => {
if(rev === 'ascending') {
rev = 1
} else if (rev === 'descending') {
rev = -1
} else {
rev = 0
}
return function (x, y) {
let a = x[attr]
let b = y[attr]
if (!a) {
a = ""
}
if (!b) {
b = ""
}
if (a < b) {
return rev * -1
}
if (a > b) {
return rev * 1
}
return 0
}
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)