11-25 12:37 阅读 558

关注

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

前言

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

图标

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

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

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

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

// 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表示的是采用哪个字段来进行排序，例如这个是按照数量来进行排序

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

//排序 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;       });     }, 复制代码

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

1. 单独方式排序

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

实现代码如下：

//新定义一个参数，用来给后端传递数据 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，传递到后端即可

作者：月__
链接：https://juejin.cn/post/7034068684666568718