VUE框架之el-table多个字段联动过滤筛选---前端实现
多字段的筛选原理：
<el-table ref="multipleTable" :data="pageData"
@filter-change="tableFilter" ">
<el-table-column type="selection" />
<el-table-column prop="tenantryname" />
<el-table-column prop="roomArea"/>
<el-table-column prop="satgetime" />
<el-table-column prop="recetime" />
<el-table-column prop="total" />
<el-table-column prop="costtypeShow"
:filters="this.receivablesstatusList" column-key="costtype" >
</el-table-column>
<el-table-column prop="invoicetypeShow"
:filters="this.invoicetypestatusList" column-key="invoicetype"
filter-placement="bottom-end" >
</el-table-column>
<el-table-column prop="applystatusShow"
:filters="this.applystatusList" column-key="applystatus"
filter-placement="bottom-end" >
</el-table-column>
<el-table-column prop="invoiceShow" label=""
:filters="this.billstatusList" column-key="invoice" width="100">
<template slot-scope="scope">
<el-tag close-transition>{{scope.row.invoiceShow}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="clearstateShow" label=""
:filters="this.coststatusList" column-key="clearstate" width="150">
</el-table-column>
<el-table-column prop="remark" label="" width="200" />
</el-table>
//解释：this.applystatusList ,this.applystatusList ,this.billstatusList,this.coststatusList 是保存筛选条件数组
//调用过滤方法
tableFilter(filters) {
let isFalg = false;
//用于保存筛选结果数组
this.resultDatarray = [];
let key;
//查找所有的过滤条件数组，找到他的key（就是对应的过滤字段）
for (var index in filters) {
key = index;
}
//以key命名，保存为本地数据---this.xxxx数组
this[key] = filters[key];
/////-----按照第一个过滤条件筛选--------
//数据源：this.receivableList；
if (this.costtype.length > 0) {
//用于判断是否进入筛选
isFalg = true;
for (let i1 in this.costtype) {
for (let j1 in this.receivableList) {
//---------查询对应的字段，符合条件的存放到 结果临时结果集 this.resultDatarray
if (this.receivableList[j1].costtype == this.costtype[i1]) {
this.resultDatarray.push(this.receivableList[j1]);
}
}
}
if (this.resultDatarray.length == 0) {
筛选了，但没有结果，不用继续下一个筛选条件
return;
}
}
////------第二个筛选条件----------------
if (this.invoicetype.length > 0) {
//用于判断是否进入筛选
isFalg = true;
let temp = [];
//如果第一个筛选条件执行了，并且有筛选结果，则从筛选结果进行第二个筛选条件
if (this.resultDatarray.length > 0) {
for (let i2 in this.resultDatarray) {
for (let j2 in this.invoicetype) {
if (this.resultDatarray[i2].invoicetype == this.invoicetype[j2]) {
temp.push(this.resultDatarray[i2]);
}
}
}
//把筛选结果赋值给结果
this.resultDatarray = temp;
//如果没有第一个筛选条件，则从数据源进行第二个筛选条件
} else {
for (let i2 in this.receivableList) {
for (let j2 in this.invoicetype) {
if (this.receivableList[i2].invoicetype == this.invoicetype[j2]) {
this.resultDatarray.push(this.receivableList[i2]);
}
}
}
}
if (this.resultDatarray.length == 0) {
return;
}
}
////----------------------
if (this.applystatus.length > 0) {
isFalg = true;
let temp = [];
if (this.resultDatarray.length > 0) {
for (let i3 in this.resultDatarray) {
for (let j3 in this.applystatus) {
if (this.resultDatarray[i3].applystatus == this.applystatus[j3]) {
temp.push(this.resultDatarray[i3]);
}
}
}
this.resultDatarray = temp;
} else {
for (let i3 in this.receivableList) {
for (let j3 in this.applystatus) {
if (this.receivableList[i3].applystatus == this.applystatus[j3]) {
this.resultDatarray.push(this.receivableList[i3]);
}
}
}
}
if (this.resultDatarray.length == 0) {
return;
}
}
////----------------------
if (this.invoice.length > 0) {
isFalg = true;
let temp = [];
if (this.resultDatarray.length > 0) {
for (let i4 in this.resultDatarray) {
for (let j4 in this.invoice) {
if (this.resultDatarray[i4].invoice == this.invoice[j4]) {
temp.push(this.resultDatarray[i4]);
}
}
}
this.resultDatarray = temp;
} else {
for (let i4 in this.receivableList) {
for (let j4 in this.invoice) {
if (this.receivableList[i4].invoice == this.invoice[j4]) {
this.resultDatarray.push(this.receivableList[i4]);
}
}
}
}
if (this.resultDatarray.length == 0) {
return;
}
}
////----------------------
if (this.clearstate.length > 0) {
isFalg = true;
let temp = [];
if (this.resultDatarray.length > 0) {
for (let i5 in this.resultDatarray) {
for (let j5 in this.clearstate) {
if (this.resultDatarray[i5].clearstate == this.clearstate[j5]) {
temp.push(this.resultDatarray[i5]);
}
}
}
this.resultDatarray = temp;
} else {
for (let i5 in this.receivableList) {
for (let j5 in this.clearstate) {
if (this.receivableList[i5].clearstate == this.clearstate[j5]) {
this.resultDatarray.push(this.receivableList[i5]);
}
}
}
}
if (this.resultDatarray.length == 0) {
return;
}
}
//如果有筛选结果，则把结果集作为参数给下一个方法
if (isFalg) {
this.getSplicPageList(this.resultDatarray);
} else {
//如果没有筛选条件，则把数据源作为参数给下一个方法
this.getSplicPageList(this.receivableList);
}
},