VUE框架之el-table多个字段联动过滤筛选---前端实现

<el-table ref="multipleTable"@filter-change="tableFilter" ><el-table-column/> 。。。。 </el-table-column/> </el
quyunde

14832人浏览 · 2018-06-05 16:34:36
quyunde · 2018-06-05 16:34:36 发布
 
   
 
 
     
  
 
   多字段的筛选原理：
 
  

 
   
 
  
 
    
   < 
   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);
        }
      }, 
        
 
       
Vue
前往低代码交流专区
更多推荐
vue 表单验证
1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^