[element-ui]对el-table表格进行排序、分页、过滤

记录一些表格的常用方法

1、排序（后端排序）

• 对要排序的列，sortable属性设置为custom(后端排序)，
• 排序时所使用排序顺序，sort-orders属性设置一个数组['descending', 'ascending', null]

  <el-table-column prop="bidCount" label="库存" width="80"
      sortable='custom' 
      :sort-orders="['descending', 'ascending', null]"></el-table-column>

• 监听 Table 的 sort-change 事件

  sortChange(column) {
      this.params.sortType = 'desc';
      if (column.prop && column.order) {
          this.params.sortField = column.prop;
          this.params.sortType = column.order === 'descending' ? 'desc' : 'asc'
      } 
      this.loadData();
  },

2、分页

• 当前页码 current-page，默认1
• 当前分页数 page-size，默认20
• 总数total，默认0，由接口返回赋值
• 分页数选择项 page-sizes，绑定数组[5, 10, 20, 50, 100]
• 组件布局layout，绑定字符串"total, sizes, prev, pager, next,jumper"

  <el-pagination
      :current-page="params.pageIndex"
      :page-size="params.pageSize"
      :total="total"
      :page-sizes="[5, 10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next,jumper"
      @size-change="handleSizeChange"
      @current-change="handlePageChange">
      <span style="float: left; margin-left: 20px">
          共 <span style="color: #17b8be; min-width: auto">{{ total }}</span> 条
      </span>
  </el-pagination>

• 页码改变触发事件 current-change，回调参数为当前页

  handlePageChange(val) {
      this.params.pageIndex = val;
      this.loadData();
  },

• 分页数改变触发事件 size-change，回调参数为每条页数

  handleSizeChange(val){
      this.params.pageIndex = 1;
      this.params.pageSize = val;
      this.loadData();
  },

3、过滤（后端过滤）

• 对要过滤的列，设置column-key属性
• filter-multiple设置为false，表示是单选
• 数据过滤的选项 filters，绑定特定格式的数组Array[{ text, value }]

• 表格筛选条件发生变化时触发 filter-change事件

  filterChange(val) {
      this.params.pageIndex = 1
      if(val.follow) {
          this.metarialName = "宝贝"; 
          this.params.follow = ''
          if(val.follow.length) {
              this.metarialName = this.typeOptions.find(item => item.value === val.follow[0]).text || '宝贝'
              this.params.follow = val.follow[0]
          }
      }
      this.loadData()
  },