element table 中sortable排序

在项目中做表格的排序，我使用的是自定义的排序，也就是通过后台接口进行的排序，写个文章记录一下element的三种排序方式。

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

一、default-sort
你需要在那个列上加排序就在那一份列上加sortable ，加完后就会出现排序的按钮了，default-sort 可以设置默认的列和它默认的排列方式 ， order 为 ascending 按钮选中的是向上的箭头，如果 order 为 descending 那选中的是向下的箭头。

    <el-table
      :data="tableData"
      height="250"
      border
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'ascending' }"
    >
      <el-table-column prop="date" sortable label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

二、sort-method

自定义方法我们需要在当前列加入sort-method，然后它的方法和sort排序是一样的，这样我们就可以自定义排序

 <el-table :data="tableData" height="250" border style="width: 100%">
      <el-table-column
        prop="date"
        sortable
        label="日期"
        :sort-method="fn2"
        width="180"
      >
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

  methods: {
    fn2(a, b) {
      return a - b;
    }
  }

三、custom-sort
根据接口进行排序，我们也需要自定义排序，这个和第二种方法不一样，第二种只是进行排序，我们不能做其他的操作

    <el-table
      :data="tableData"
      height="250"
      border
      style="width: 100%"
        @sort-change="handlesortChange"
    >
      <el-table-column prop="date" sortable="custom" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

  // 主要是column中的值，你需要给你的后端传过去，我的paramsObj 就是传给后端的
    handlesortChange(column) {
      if (column.order == "ascending") {
        this.paramsObj.asc = true;
      }
      if (column.order == "descending") {
        this.paramsObj.asc = false;
      }
    }