Eelment UI 表格头部添加图标，使用后端排序

前言

对于Eelment UI 自带的表格功能已经使用了很久，一直觉的复制粘贴很爽，然后今天就遇到了几个问题，然后开始查看官方文档，终于搞定之后，写个文章记录一下

图标

在表格的头部添加icon图标，可以采用如下方法：render-header

1. 在table表格中需要显示小图标的头部进行使用

<el-table-column
         :render-header="renderHeader"
          align="center"
          label="类名"
          show-overflow-tooltip
        >

2. 写入如下的方法，进行图标的引入以及显示

// render 事件
    renderHeader(h, { column }) {
      // h即为cerateElement的简写，具体可看vue官方文档
      return h("div", [
        h("span", column.label),
        h(
          "i",
          {
            class: "el-icon-folder", //需要使用的icon图标
            style: "margin-left:5px;",
          }
        ),
      ]);
    },

显示结果如下图所示：

之后再需要的地方进行添加就可以了

排序

本来采用的是Element UI自带的sortable进行的排序，然后发现它自带的排序只是对当前页的数据进行了排序，而不是对所有后端返回的数据进行排序，然后后端就给我写了排序接口，相当于是采用后端数据排序的方式，方法如下：

1. 对table表格进行处理，在表格中加入如下方法，然后再需要的排序地方写入custom，表示采用自定义的方法进行排序，可以查看表格文档：

代码如下：

<el-table
        :data="tableData"
        @sort-change="changeTableSort"
        style="width: 100%"
      >

在需要使用的地方进行排序图标的添加（写入： :sortable="'custom'"）

<el-table-column
          :sortable="'custom'"
          align="center"
          prop="create_datetime"
          label="创建时间"
          width="180"
        >
        </el-table-column>

之后就可以通过changeTableSort方法来获取需要排序的字段名称以及排序方式 2. 使用排序方法，获取需要排序的字段以及方式

//排序
    changeTableSort(column) {
      console.log("表格排序", column);
      }

可以打印出如下数据：

order就是排序方式，表示点击的是向下或者向上的箭头，order的值有（ascending 向上的箭头）和（descending 向下的箭头）；prop表示的是采用哪个字段来进行排序，例如这个是按照数量来进行排序

3. 调用后端给的排序接口以及需要传递过去的参数

//排序
export function getorder(query){
    return request({
        url:"/zhmq/main/cluster/",
        method:"get",
        params:query
    })
}

通过把后端需要的参数传递过去，例如有的要求 0或1，有的是需要true or false，之后就需要判断是通过哪一个字段进行的排序，如时间排序，数量排序，编号排序或者三者混合排序，这就需要按照后端的要求来了，我调的这个接口有点特殊，在参数前面加一个-就可以了，例如正排就是count,倒排就是-count

4.单独字段排序

本来后端说是要多字段排序，传递过去的数据后端采用一个字段进行接收

后端接口文档说明：
*如果ordering有多个，用逗号隔开，如* ?ordering=-create_datetime,-order

然后我传递过去的排序数据就直接拼接起来，毕竟是多字段排序，我也就不需要去考虑到底是哪一个字段进行的排序 进行初始化定义：

      tableorder: "order",
      tablecreate_datetime: "create_datetime",
      tablecount: "count",

通过接口给后端传递数据

//表格数据查找
gethostList() {
      getorder({
         ordering:
           this.tableorder +
           "," +
           this.tablecount +
           "," +
          this.tablecreate_datetime, //通过字段拼接，直接全部传递给后端
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        name: this.queryParams.name,
      }).then((res) => {
        console.log(res);
        console.log("排序成功");
        this.tableData = res.data.results;
        this.total = res.data.count;
      });
    },

结果后端说这种一起混合排序和没排一样，让换一下，一次只能通过一种方式进行排序，如时间排序，数量排序等等，只能选择一种方式进行排序

5. 单独方式排序 只能采用一种方式排序的话，就需要判断是采用的哪一种排序方式，是正序还是倒序，这就需要进行一系列的判断，而且还需要保证每次传递给后端的数据只有一个

实现代码如下：

//新定义一个参数，用来给后端传递数据
tableing:"",//进行排序数据赋值

//对接口进行更改
 gethostList() {
      getorder({
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        name: this.queryParams.name,
        ordering: this.tableing, //传递给后端的数据（单个排序）
      }).then((res) => {
        console.log(res);
        console.log("排序成功");
        this.tableData = res.data.results;
        this.total = res.data.count;
      });
    },

排序功能的实现

因为是采用单个单个的排序条件，所以需要判断是通过的哪一个排序字段，这个字段点击的又是哪种排序方式，正排还是倒排，所以需要进行判断，采用if else来进行判断 代码如下：

//排序
    changeTableSort(column) {
      console.log("表格排序", column);
      this.filedName = column.prop; //获取排序的字段名
      this.soringType = column.order;
      this.tableing = "";
      console.log("排序字段以及方式", this.filedName, this.soringType);
      if (this.soringType == "descending" && this.filedName == "order") {
        this.tableorder = "-order"; 
        this.tableing = this.tableorder;
        console.log("order排序", this.tableing);
        this.gethostList(); //查询后端排好的数据
      } else if (
        this.soringType == "descending" &&
        this.filedName == "create_datetime"
      ) {
        this.tablecreate_datetime = "-create_datetime";
        this.tableing = this.tablecreate_datetime;
        this.gethostList();
        console.log("时间箭头向下排序");
      } else if (this.soringType == "descending" && this.filedName == "count") {
        this.tablecount = "-count";
        this.tableing = this.tablecount;
        this.gethostList();
        console.log("数量箭头向下排序");
      } else if (this.soringType == "ascending" && this.filedName == "order") {
        this.tableorder = "order";
        console.log("order箭头向上排序");
        this.tableing = this.tableorder;
        this.gethostList();
      } else if (
        this.soringType == "ascending" &&
        this.filedName == "create_datetime"
      ) {
        this.tablecreate_datetime = "create_datetime";
        this.tableing = this.tablecreate_datetime;
        this.gethostList();
        console.log("时间箭头向上排序");
      } else if (this.soringType == "ascending" && this.filedName == "count") {
        this.tablecount = "count";
        this.tableing = this.tablecount;
        this.gethostList();
        console.log("数量箭头向上排序");
      } else {
        this.gethostList();
      }
    },

通过判断之后把需要传递的数据赋值到tableing，传递到后端即可