多字段的筛选原理:


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

Logo

前往低代码交流专区

更多推荐