多字段的筛选原理：
<
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);
}
},