element ui指定列表头添加多页排序功能

element ui自带了排序功能sort，但是只能对当前页的数据进行排序，如果存在多页排序的需求，就要自己编写多页排序的功能。这里用的是前端传参到后台执行排序的方式。后端排序的优点是导出报表也可以很顺滑的继承和页面同样的排序。

具体逻辑如下：

一、用css画排序图标(默认是灰色的、注释掉的是蓝色，会在点击时变化，和element ui自带的排序图标颜色和样式是一致的)：

/*上箭头*/
    .arrow-up {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #c0c4cc;
        /*border-bottom: 5px solid #409EFF;*/
        margin-top: 10px;
    }

/*下箭头*/
    .arrow-down {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #c0c4cc;
        /*border-top: 5px solid #409EFF;*/
        margin-top: 2px;
    }

 这是默认的图标样式：

二、使用element ui的  <template slot='header' slot-scope='scope'>自定义表头，在表头添加排序图标，并给表头添加点击事件dateSort

slot='header' 可以指定template内的元素作用在表头，如果不加这个，会作用在整个列中

<el-table-column width="100" align='center'
	<template slot='header' slot-scope='scope'>
		<span style="cursor: pointer;" @click="dateSort">
			<span>排序字段</span>
			<span class="caret-wrapper">
				<i id="dateSortAsc" class="arrow-up"></i>
				<i id="dateSortDesc" class="arrow-down"></i>
			</span>
		</span>
	</template>
</el-table-column>

三、编写点击事件，设置一个全局变量dateSortSign: null,每次点击时会给它赋值,实现点一下上箭头变蓝，升序排列，给dateSortSign赋值'asc',再点一下下箭头变蓝，降序排列，给dateSortSign赋值'desc',再点一下恢复默认排序,给dateSortSign赋值null。

data() {
            return {
                dateSortSign: null,
            }
        },

methods: {
            //排序方法
            sortDate (){
                //如果之前是没有值的状态，改为升序
                if (this.sortDateSign === null){
                    this.sortDateAsc ();
                } else if (this.sortDateSign === "asc"){
                    //如果之前是升序，改为降序
                    this.sortDateDesc ();
                } else if (this.sortDateSign === "desc"){
                    //如果之前是降序，改为不排序
                    this.sortDateNo ();
                }
            //    执行查询
                this.getList();
            },

            //升序
            sortDateAsc (){
               // 上箭头设为蓝色
               $("#dateSortAsc").css("border-bottom-color","#409EFF")
               // 下箭头设为灰色
               $("#dateSortDesc").css("border-top-color","#c0c4cc")
                //升序
                this.sortDateSign = "asc";
            },
            //降序
            sortDateDesc (){
                // 下箭头设为蓝色
                $("#dateSortDesc").css("border-top-color","#409EFF")
                // 上箭头设为灰色
                $("#dateSortAsc").css("border-bottom-color","#c0c4cc")
                //降序
                this.sortDateSign = "desc";
            },
            //不排序
            sortDateNo (){
                // 下箭头设为灰色
                $("#dateSortDesc").css("border-top-color","#c0c4cc")
                // 上箭头设为灰色
                $("#dateSortAsc").css("border-bottom-color","#c0c4cc")
                //不排序
                this.sortDateSign = null;
            },
},

写到这里，前端页面的效果和参数处理已经完成了。效果如下：

四、后台执行排序。每次点击排序图标，都会执行一次查询，我们将排序参数‘dateSortSign’放入查询请求中，在后台判断，如果dateSortSign值为null，那么就不需要进行这个字段的排序，否则按照传过来的参数值作为排序方式进行排序，所以这里要用‘$’，而不是‘#’.

我这里用的是mybatis，下面是关于判断部分的代码

<choose>
	<when test="dateSortSign!= null and signDateSortSign != ''">
		order by dateSortSign ${signDateSortSign}
	</when>
	<otherwise>

	</otherwise>
</choose>

到这里，就实现了指定列的多页排序