zoukankan      html  css  js  c++  java
  • 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=" 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>
  • 相关阅读:
    界面开发注意要素,降低界面BUG
    软件测试及其重要性
    浅谈自动化测试工具之Selenium
    浅谈探索式软件测试
    浅谈功能测试流程
    关于软件测试中测试用例的重要性
    第1章 性能测试整体认知
    数据库对比,优化
    2、补充介绍
    1、MarkDown基本语法
  • 原文地址:https://www.cnblogs.com/dianzan/p/13959071.html
Copyright © 2011-2022 走看看