element 2.x版本暂不支持多列排序，据说要等3.x版本才能实现。所以无法用官方api实现，但可以利用 自定义表头+图标+点击表头排序 实现。
具体思路：
- 定义点击表头事件
- 获取点击的字段，存进数组
- 隐藏原有排序图标，使用css画三角形图标替代，根据排序事件的order值绑定动态class控制样式
效果图
实现代码
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
@header-click="handleHeaderCLick"
:header-cell-class-name="handleHeaderClass"
>
<el-table-column prop="title" label="流程名称" :sortable="'custom'">
<template slot="header" slot-scope="scope">
<div>
流程名称
<span class="caret-wrapper-n">
<i
class="asc"
:class="{ green: scope.column.order === 'ascending' }"
@click.native.stop="
handleHeaderCLick(scope.column, $event, 'ascending')
"
>
</i>
<i
class="desc"
:class="{ green: scope.column.order === 'descending' }"
@click.native.stop="
handleHeaderCLick(scope.column, $event, 'descending')
"
>
</i>
</span>
</div>
</template>
</el-table-column>
<el-table-column
prop="releaseTime"
label="流程上线时间"
:sortable="'custom'"
>
<template slot="header" slot-scope="scope">
<div>
流程上线时间
<span class="caret-wrapper-n">
<i
class="asc"
:class="{ green: scope.column.order === 'ascending' }"
@click.native.stop="
handleHeaderCLick(scope.column, 'ascending')
"
>
</i>
<i
class="desc"
:class="{ green: scope.column.order === 'descending' }"
@click.native.stop="
handleHeaderCLick(scope.column, 'descending')
"
>
</i>
</span>
</div>
</template>
<template slot-scope="scoped">
<span>
{{ $moment(parseInt(scoped.row.releaseTime)).format('YYYY-MM-DD') }}
</span>
</template>
</el-table-column>
<el-table-column prop="source" label="流程类型" :sortable="'custom'">
<template slot="header" slot-scope="scope">
<div>
流程类型
<span class="caret-wrapper-n">
<i
class="asc"
:class="{ green: scope.column.order === 'ascending' }"
@click.native.stop="
handleHeaderCLick(scope.column, 'ascending')
"
>
</i>
<i
class="desc"
:class="{ green: scope.column.order === 'descending' }"
@click.native.stop="
handleHeaderCLick(scope.column, 'descending')
"
>
</i>
</span>
</div>
</template>
<template slot-scope="scoped">
<span>
{{ scoped.row.sourceName }}
</span>
</template>
</el-table-column>
<el-table-column prop="name" label="部门" :sortable="'custom'">
<template slot="header" slot-scope="scope">
<div>
部门
<span class="caret-wrapper-n">
<i
class="asc"
:class="{ green: scope.column.order === 'ascending' }"
@click.native.stop="
handleHeaderCLick(scope.column, 'ascending')
"
>
</i>
<i
class="desc"
:class="{ green: scope.column.order === 'descending' }"
@click.native.stop="
handleHeaderCLick(scope.column, 'descending')
"
>
</i>
</span>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page.sync="pagination.pageNum"
:page-size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
:total="total"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</template>
<script>
import { getDialog1 } from '@/api/Cartogram' // api接口
export default {
data() {
return {
tableData: [],
queryobj: [],
pagination: {
pageSize: 8,
pageNum: 1
},
total: 0
}
},
methods: {
handleHeaderClass({ column }) {
column.order = column.multiOrder
},
// 点击表头，状态判断
handleHeaderCLick(column, event) {
console.log(column, event, event.target._prevClass, 'cccccccc2')
if (column.sortable !== 'custom') {
return
}
console.log(column.multiOrder, event.target._prevClass)
if (!column.multiOrder && event.target._prevClass == 'desc') {
column.multiOrder = 'descending'
} else if (!column.multiOrder && event.target._prevClass == 'asc') {
column.multiOrder = 'ascending'
} else if (column.multiOrder && event.target._prevClass == 'asc') {
column.multiOrder = 'ascending'
} else if (column.multiOrder && event.target._prevClass == 'desc') {
column.multiOrder = 'descending'
} else if (!event.target._prevClass) {
column.multiOrder = ''
} else {
column.multiOrder = ''
}
this.handleOrderChange(column.property, column.multiOrder)
},
handleOrderChange(orderColumn, orderState) {
console.log(orderColumn, orderState)
let result = this.queryobj.find(e => e.prop === orderColumn)
//orderState为排序值。 当不点击排序图标（点击表头空白处）时，删除这项、不作为排序条件
if (orderState) {
if (result) {
this.queryobj = this.arrRemoveJson(this.queryobj, 'prop', orderColumn)
}
// 后台需根据顺序确定排序字段的优先级，所以使用unshift插入
this.queryobj.unshift({
prop: orderColumn,
order: orderState === 'ascending' ? 'asc' : 'desc' // 后台需要asc或者desc需转下，如不需要可直接赋值
})
}
this.getList()
},
// 当排序字段为空（即点击表头空白处时）删除此项
arrRemoveJson(arr, attr, value) {
if (!arr || arr.length == 0) {
return ''
}
return arr.filter(item => item[attr] != value)
},
sortChange(column) {
this.handleOrderChange(column.property, column.multiOrder)
},
async getList() {
//。。。。接口内容
},
handleCurrentChange(val) {
this.pagination.current = val
this.getList()
}
},
mounted() {
this.getList()
}
}
</script>
<style lang="scss" scoped>
span.caret-wrapper-n {
display: inline-flex;
flex-direction: column;
align-items: center;
height: 34px;
width: 24px;
vertical-align: middle;
cursor: pointer;
overflow: initial;
position: relative;
i {
width: 0;
height: 0;
border: 5px solid transparent;
position: absolute;
left: 7px;
&.desc {
border-top-color: #c0c4cc;
bottom: 7px;
&.green {
border-top-color: #2a4791;
}
}
&.asc {
border-bottom-color: #c0c4cc;
top: 5px;
&.green {
border-bottom-color: #2a4791;
}
}
}
}
::v-deep span.caret-wrapper {
display: none !important;
}
</style>
