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);
        }
      },