<template>
<el-table
ref="filterTable"
:data="tableData"
style="width: 100%"
@filter-change="filterChange">
<el-table-column
prop="date"
label="日期"
sortable
width="180"
column-key="date"
:filters="datafilter"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
:formatter="formatter">
</el-table-column>
<el-table-column
prop="tag"
label="标签"
width="100"
:filters="tagfilter"
filter-placement="bottom-end">
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === '家' ? 'primary' : 'success'"
disable-transitions>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
</el-table>
</template>
methods: {
formatter(row, column) {
return row.address;
},
filterTag(value, row) {
return row.tag === value;
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
}
}
}
通过filterChanges事件,监听表格每列的筛选条件变化,再把筛选条件传给后端,后端进行数据过滤后返回数据,重新渲染表格
filterChange(filters){
//表格字段筛查
this.datafilter = filters['datafilter'];
if(this.datafilter != null && this.datafilter!="" && this.datafilter != undefined){
this.filterobj= this.filterobj.filter(item => item.column != 'data-filter');
this.filterobj.push({
column:"data-filter",
selections:this.datafilter
})
//通过this.filterchose来判断过滤条件是勾选还是取消
this.filterchose.datafilter = this.datafilter;
}else if(this.datafilter && this.datafilter.length==0){
this.filterobj = this.filterobj.filter(item => item.column != 'data-filter');
this.filterchose.datafilter = [];
}
me.service.ByKeyWord(this.filterobj).then(res => {
this.tableData.splice(0,this.tableData.length);
this.tableData = res.data;
this.$nextTick(()=>{
//表格重新渲染,过滤状态也会重新渲染,需要手动对字段筛选重新勾选
this.$refs.rulestore.columns.forEach((val,ind)=>{
if(val.property=='datafilter' && this.filterchose.datafilter!=[]){
this.$refs.rulestore.columns[ind].filteredValue=me.data.filterchose.datafilter
}
})
})
})
}