el-table多选搜索

 

 js

  getChangeSetModle() {
      let that = this;
      let search = this.search;
      let setModelDataCopy = JSON.parse(JSON.stringify(this.setModelDataCopy));
      let filtData = setModelDataCopy.filter((data) => {
        return data.attributeName.toLowerCase().includes(search.toLowerCase());
      });
      this.setModelData = JSON.parse(JSON.stringify(filtData));

      setTimeout(() => {
        that.requestData(that.setModelData);
      }, 200);
    },
    // 属性设置--多选数据
    selectionChange(val) {
      let setModelData = JSON.parse(JSON.stringify(this.setModelData));
      let setModelDataCopy = JSON.parse(JSON.stringify(this.setModelDataCopy));
      // 将选中的数据存储起来

      // console.log(val);
      // console.log(this.setModelData);
      // return;
      if (this.search) {
        // 如果存在搜索条件
        for (let i = 0; i < setModelData.length; i++) {
          setModelData[i].checked = false;
        }
        if (val.length > 0) {
          for (let i = 0; i < val.length; i++) {
            for (let j = 0; j < setModelData.length; j++) {
              if (val[i].id == setModelData[j].id) {
                setModelData[j].checked = true;
              }
            }
          }
        }

        // console.log(setModelData);
        for (let i = 0; i < setModelDataCopy.length; i++) {
          for (let j = 0; j < setModelData.length; j++) {
            if (setModelDataCopy[i].id == setModelData[j].id) {
              setModelDataCopy[i].checked = setModelData[j].checked;
            }
          }
        }
        let newArr = [];
        for (let i = 0; i < setModelDataCopy.length; i++) {
          if (setModelDataCopy[i].checked) {
            newArr.push(setModelDataCopy[i]);
          }
        }
        this.setSelectArr = JSON.parse(JSON.stringify(newArr));
        this.setModelDataCopy = JSON.parse(JSON.stringify(setModelDataCopy));
      } else {
        this.setSelectArr = val;
      }
    },
    // 属性设置--列表数据
    async setQuotaStatuList() {
      console.log(this.setSelectArr);
      console.log(this.setSelectRow);
      let arr = [];
      let selectArr = this.setSelectArr;
      for (let i = 0; i < selectArr.length; i++) {
        arr.push(selectArr[i].id);
      }
      let datVal = {
        attributes: arr.toString(),
      };
      const res = await setQuotaStatuList(this.setSelectRow.id, datVal);
      this.setModeldialogVisible = false;
      let resSureback = resSure(res);
      if (!resSureback) {
        this.$set(this.tableData[index], "ifEnabled", !value);
        return;
      } else {
        this.$message({
          type: "success",
          message: "设置成功!",
        });
      }
      this.getData();
      // console.log(res.data)
      // this.setModelData=res.data;
    },
    // 属性设置--选中回显
    requestData(list) {
      if (this.$refs.setTable) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].checked) {
            // 将已选的数据筛选出来在进行选中;
            this.$refs.setTable.toggleRowSelection(list[i], true); //这样就可以了
          }
        }
      }
    },
    //属性设置--打开
    async setModel(row) {
      let that = this;
      this.setSelectArr = [];
      this.search = "";
      console.log(row);
      const res = await getQuotaStatuList(row.id);
      console.log(res);

      this.setModelData = res.data;
      this.setModelDataCopy = res.data;
      this.setModeldialogVisible = true;
      this.setSelectRow = row;
      setTimeout(() => {
        that.requestData(res.data);
      }, 300);
    },
    //属性设置--确定
    setModelSure() {
      console.log(this.setSelectArr);
      console.log(this.setSelectRow);
      this.setQuotaStatuList();
      // this.setModeldialogVisible = false;
    },
    //属性设置--取消
    setModelCancle() {
      this.setModeldialogVisible = false;
    },

html

      <el-table
        v-if="setModeldialogVisible"
        border
        class="modelDiago"
        :data="setModelData"
        style="width: 100%"
        ref="setTable"
        @selection-change="selectionChange"
      >
        <el-table-column align="center" type="selection" width="55">
        </el-table-column>
        <el-table-column prop="attributeName" label="属性名称">
        </el-table-column>