vue-computed:实现快速本地条件搜索表单

给表单快速添加条件搜索事件：

用到核心代码：

 computed: {
    personTableCompute() {
      if (this.searchTableInpValue) {
        this.persionTable.filter((data) => {
          console.log("tabel===", Object.keys(data));
          return ["accountid", "phone", "deptId", "realName", "account"].some(
            (key) => {
              return (
                String(data[key])
                  .toLowerCase()
                  .indexOf(this.searchTableInpValue) > -1
              );
            }
          );
        });
      }
      return this.persionTable;
    },
  },

["accountid", "phone", "deptId", "realName", "account"] 是对象的键，可以添加的搜索选择
table:

 <el-table
            :data="personTableCompute"
            ref="multipleTable"
            tooltip-effect="dark"            @selection-change="handleSelectionChange"
          >

 

核心事件methods：

// 本地搜索过滤
    searchTable() {
      if (this.searchTableInpValue) {
        this.persionTable = this.persionTable.filter((data) => {
          console.log("tabel===", Object.keys(data));
          return ["accountid", "phone", "deptId", "realName", "account"].some(
            (key) => {
              return (
                String(data[key])
                  .toLowerCase()
                  .indexOf(this.searchTableInpValue) > -1
              );
            }
          );
        });
      } else {
      }
    },
    // 重置
    searchTableCancel() {
      this.searchTableInpValue = "";
      if (!this.partentIdvalue) return;

      this.$axios
        .post(this.$apis.ccweb.newDataSL.selectUserByDeptId, {
          deptId: this.partentIdvalue,
        })
        .then((response) => {
          if (response && response.code === 200) {
            this.persionTable = response.data;
            this.form.rectDeptId = this.partentIdvalue;
          } else {
            this.persionTable = [];
          }
        });
    },