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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐