Element Table 全部数据前端排序详解

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
    }
  }