解决element-ui中的table标头的筛选功能(多数据-数组中存放对象)
需求介绍:需要将表格中所有的数据渲染到标头,并进行筛选。所有的数据都是通过后端请求回来的。
效果图
代码
<el-table class="content"
ref="filterTable"
:data="$store.state.tableData "
:default-sort = "{prop: 'dtime', order: 'descending'}"
highlight-current-row
@row-click="pitchOn"
style="width: 100%; ">
<el-table-column
prop="flowno"
label="交易流水"
:filters="this.tableListFlowno"
:filter-method="filterFlowno"
filter-placement="bottom-end"
sortable
>
</el-table-column>
data: () => {
// 过滤
return {
tableListFlowno:[], //交易流水
}
},
// 筛选
filterFlowno (value, row) {
return row.flowno === value
},
methods:{
//公共方法
filterPublic(arr,list,tableList){
if(!arr.includes(tableList)){
list.push({
'text':tableList,
'value':tableList,
})
arr.push(tableList)
}
},
// 请求所有交易流水
filterList(){
this.tableListFlowno=[]
let arr1 = []
for(let i = 0;i <res.data.errMsg.length;i++){
this.filterPublic(arr1,this.tableListFlowno,res.data.errMsg[i].flowno)
}
}
因为过滤的是数组中的对象,没有比较。所以另建一个空数组,用来比较里面是否已经存在参数