element-ui el-table表格排序sortable參數解析

表格組件的排序功能,點擊排序表頭可以進行升序和降序進行排序

頁面代碼,基本上排序的參數都使用了

<el-table
  :data="tableData"
  style="width: 100%"
  <!-- 數據由后台進行排序時sortable="custom",需要監聽排序點擊事件,會返回當前的prop和order -->
  @sort-change="changeSort"
  <!-- default-sort指定的默認排序,默認用date這一列排序,排序為升序,默認的排序也是升序 -->
  :default-sort="{prop: 'date', order: 'ascending'}"
  border>
  <el-table-column
    prop="date"
    label="日期"
    <!-- 如果需要對表格的那一列進行排序,加一個sortable參數,可取的值有true,false,custom -->
    sortable
    <!-- sort-orders接收一個數組,用來指定點擊可排序表頭時排列的順序,默認是['ascending', 'descending', null]點擊時先升序ascending,再點擊降序descending,再點擊不排序null,按表格的默認索引排.可以自己設置排列順序 -->
    :sort-orders="['ascending', 'descending']"
    width="180">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    <!-- sort-by指定數據按哪個屬性進行排序,如果不指定,就是按這里的prop值排,指定一個時寫成字符串形式:sort-by="name",指定多個時,使用數組.這里的效果就是,當姓名的值全部一樣時,就按address進行排序 -->
    :sort-by="['name', 'address']"
    sortable
    width="180">
  </el-table-column>
  <el-table-column
    prop="address"
    label="地址"
    <!-- 以上的參數排序都是在已得到的tableData數據上進行排序,如果數據做了分頁當前的數據不是全部的數據時,排序就需要后台進行排序,這時需要把sortable的值改為custom,在table中用sort-change事件監聽排序點擊事件 -->
    sortable="custom">
  </el-table-column>
</el-table>

methods: {
  // 從后台獲取數據,重新排序
  changeSort (val) {
    console.log(val) // column: {…} order: "ascending" prop: "date"
    // 根據當前排序重新獲取后台數據,一般后台會需要一個排序的參數

  }
}