vue+elementui实现el-table表格动态表头筛选功能
<el-table ref="table"v-loading="listLoading"
:cell-
:data="tableData"
:header-cell-
:
row-class-name="tableRowClassName":row-key="row_key"
:span-method="arraySpanMethod"
border
class="btns_siyou"
element-loading-text="拼命加载中"
highlight-current-row
size="mini"
@select="selectCheckOne"@select-all="selectAll"
@sort-change="sortChangeFn"
@filter-change="filterChange"
>
<el-table-column :resizable="false"type="selection"width="50"></el-table-column>
<!--循环表头-->
<template v-for="(item, index) in tableHead">
//判断哪⼀列需要筛选功能
<el-table-column v-if="item.field == 'qualificationStatus'":key="index"
:column-key="item.field"
:filter-multiple="false"
:filters="zzqkdata2":label="item.fieldName":min-width="minWidthFn(item)"
:property="item.field"
filter-placement="top-end"
>
<template slot-scope="scope"></template>
</el-table-column>
//filter-multiple 是否多选
//filters 筛选数组
<el-table-column v-else-if="item.field == 'intentionLevel'":key="index"
:column-key="item.field"
:filter-multiple="false"
:filters="yixData2":label="item.fieldName":min-width="minWidthFn(item)"
:property="item.field"
filter-placement="top-end"
element表格横向滚动条
>
<template slot-scope="scope"></template>
</el-table-column>
<el-table-column v-else-if="item.field == 'callStatus'":key="index"
:column-key="item.field"
:filter-multiple="false"
:filters="phoneTelData2":label="item.fieldName":min-width="minWidthFn(item)"
:property="item.field"
filter-placement="top-end"
>
<template slot-scope="scope"></template>
</el-table-column>
/
/其他列
<el-table-column v-else:key="index":label="item.fieldName":min-width="minWidthFn(item)"
:property="item.field"
:sortable="sortAbleFn(item)"
>
<template slot-scope="scope">
<!--企业名称-->
<span v-if="item.fieldName === '企业名称'">...</span>
<!--联系⽅式-->
<span v-else-if="item.fieldName === '联系⽅式'">...</span>
<!--否则-->
<span v-else>{{ lumn.property] === "" ? "--" : lumn.property] }}</span> </template>
</el-table-column>
// table表头筛选条件触发事件
filterChange(filters){
let data =JSON.parse(JSON.stringify(this.tableDatasList))
let aaa ={text:'', value:''}
let $select = Object.keys(filters)[0]
//代码待优化，，，哈哈哈哈哈
if($select =="qualificationStatus"){
aaa =qkdata2.find(val => filters.qualificationStatus[0]== val.value)        datapanyType =!this.isobjEmpty(aaa)? aaa.value :''
}else if($select =="intentionLevel"){
aaa =this.yixData2.find(val => filters.intentionLevel[0]== val.value)
data.followQueryInfo.intentionLevel =!this.isobjEmpty(aaa)? aaa.value :'' }else if($select =="callStatus"){
aaa =this.phoneTelData2.find(val => filters.callStatus[0]== val.value)
data.followQueryInfo.callStatus =!this.isobjEmpty(aaa)? aaa.value :'' }else{
}
this.tableHead.forEach(val =>{
if(val.field == $select){
if(this.isobjEmpty(aaa)){
aaa ={text:'', value:''}
if($select =="qualificationStatus"){
< ='有⽆资质'
}else if($select =="intentionLevel"){
< ='意向度'
}else if($select =="callStatus"){
< ='电话状态'
}else{
}
}
val.fieldName =
}
})
this.pageNum =0
this.currentPage4 =1
this.tableDatasList =JSON.parse(JSON.stringify(data))
},