: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"
    // 根據當前排序重新獲取後臺資料,一般後臺會需要一個排序的引數

  }
}