Element Table 全部数据前端排序详解
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
Element的表格列具有排序功能,只需在el-table-column元素添加sortable属性即可:
<el-table-column prop="xxxx" label="xxxx" sortable></el-table-column>
但是如果引入分页,则点击该列排序标记时,将只对当页数据进行排序,而非全部数据。
如果想对全部数据进行排序,需要对el-table绑定sort-change监听:
<el-table :data='showed_data' @sort-change='sort_change'>
将列属性sortable设置为custom:
<el-table-column prop="xxxx" label="xxxx" sortable='custom'></el-table-column>
sort-change绑定方法具有参数:column,这是一个对象:
column: {
prop: 'xxxx', // el-table-column中的prop
order: 'xxxx', // 'ascending' or 'descending'
}
示例代码如下:
my_desc_sort(a, b) {
if (a.col_1 > b.col_1) {
return -1
} else if (a.col_1 < b.col_1) {
return 1
} else {
return 0
}
},
my_asc_sort(a, b) {
// ... ...
},
sort_change(column) {
this.current_page = 1 // return to the first page after sorting
if (column.prop === 'col_1') {
if (column.order === 'descending') {
this.filtered_data = this.filtered_data.sort(this.my_desc_sort)
} else if (column.order === 'ascending') {
this.filtered_data = this.filtered_data.sort(this.my_asc_sort)
}
} else if (column.prop === 'col_2') {
// ... ...
}
this.showed_data = this.filtered_data.slice(0, this.page_size) // show only one page
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)