表头筛选、排序功能：
image.png
可以做
前端筛选，排序，（存在问题，前端无法对所有数据进行筛选或者排序，只能对当页数据。 所以前端做这种处理只适用于数据量少，无分页情况或者前端一次拿到了所有数据自己分页的情况）调用
后端接口进行筛选，或者排序，好处是能对全部数据进行筛选或者排序
筛选功能
排序的表头筛选器代码 ：
绑定 :filter-method="filterHandler" 代表筛选条件变化时
<el-table-column
prop="bigMethodDesc"
show-overflow-tooltip
label="评标办法"
min-width=3
:filters="selectData.big_method"
:filter-method="filterHandler"
class-name="lasttd"
column-key="bigMethod"
>
<template slot="header">
<span >评标办法</span>
</template>
</el-table-column>
1、前端对数据进行筛选的方法
// filterHandler方法
filterHandler(value, row, column) { // 该方法会对每个row执行
let property = column['property'];
// console.log(property)
return row[property] === value; // ** 此句返回前端筛选后的数据
// value是filters里绑定的数据 里选中的项的value, 例如上面的selectData.big_method
},
2、调用后端接口对数据进行筛选
首先，el-table绑定这个方法
@filter-change="tableFilterChange"
// filterHandler方法
filterHandler(value, row, column) { // 该方法会对每个row执行
let property = column['property'];
// console.log(property)
return row // 返回所有数据 注销前端筛选
},
tableFilterChange(filters){ // 表格筛选条件更改
this.$refs.purchasePackage.bodyWrapper.scrollTop = 0;
const keys=Object.keys(filters)
const values=Object.values(filters)
const key=keys[0]
const value=values[0]
this.chooseSelect[key]=value // chooseSelect 存储所有勾选的数据，后端筛选接口时会用到
this.getFilter_tableData() // 传筛选的参数 调用后端接口返回数据
},
排序功能
排序的表头列的代码
<el-table-column prop="businessWeight" label="商务权重" min-width=2.5 >
<template slot="header" >
<div class="rigbox">
商务权重
<el-dropdown @command="handleCommand" class="rig_icon">
<!-- <span class="sortable">⇃↾</span> -->
<span class="sortable businessWeight">
<span class="des">⇃</span>
<span class="asc">↾</span>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="businessWeight ascending">升序 ↾</el-dropdown-item>
<el-dropdown-item command="businessWeight descending">降序 ⇃</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</el-table-column>
1、前端排序
// handleCommand
handleCommand(command){ // 前端表格排序
let arr = command.split(' ');
this.$refs['purchasePackage'].sort(arr[0],arr[1]); // 前端排序
const lightSort=arr[1].slice(0,3)
$('.asc').removeClass("lightSort")
$('.des').removeClass("lightSort")
$(`.${arr[0]}`).find(`.${lightSort}`).addClass("lightSort") // 高亮排序图标 该逻辑非必须
this.chooseSelect.orders.arr[0] = arr[1] // 存储排序的参数 后端排序时会用到参数 this.chooseSelect
},
2、调用后端接口排序
tableSortChange(column ){ // 表格排序更改
this.$refs.purchasePackage.bodyWrapper.scrollTop = 0;
this.$refs.purchasePackage.clearSort() // 注销前端的排序
// 这句很重要，把表格自己的排序清除掉
this.getFilter_tableData() // 传排序的参数 调用后端接口返回数据
},
总结：如果是前端排序或者筛选，只需要用到
column上的两个方法:filter-method="filterHandler"或者@command="handleCommand";
如果需要调用后端接口，则需要用到给
table绑定的两个方法，@filter-change="tableFilterChange"或者@sort-change="tableSortChange"，另外需要清除前端筛选或者排序的效果
