element-ui el-table表格排序sortable参数解析


表格组件的排序功能,点击排序表头可以进行升序和降序进行排序



页面代码,基本上排序的参数都使用了
  :data="tableData"
  style="width: 100%"
  
  @sort-change="changeSort"
  
  :default-sort="{prop: 'date', order: 'ascending'}"
  border>
  column
    prop="date"
    label="日期"
    
    sortable
    
    :sort-orders="['ascending', 'descending']"
    width="180">
  
  column
    prop="name"
    label="姓名"
    
    :sort-by="['name', 'address']"
    sortable
    width="180">
  
  column
    prop="address"
    label="地址"
    
    sortable="custom">
  


methods: {
  // 从后台获取数据,重新排序
  changeSort (val) {
    console.log(val) // column: {…} order: "ascending" prop: "date"
    // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数

  }
}