多表格勾选回显，父表格为主，筛选子表格数据

最新推荐文章于 2022-04-19 22:12:03 发布

mtreasure

最新推荐文章于 2022-04-19 22:12:03 发布

阅读量456

点赞数

分类专栏： vue 文章标签： vue 多表格勾选回显

本文链接：https://blog.csdn.net/j123450/article/details/102968051

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在业务需求中：将申请单号和信息放置主表格，将表格明细放置子表格，通过勾选数据，提交选中的数据（用于汇总数据、审批）。

需求分析如下

主表格未被选中时，需将所有子表格数据展示。
勾选主表格，显示对应的子表格。
取消勾选的主表格，原先勾选的子表格的勾选取消。

实践步骤：

查看时将父级数据添加到主表格数据源中。将子集的数据保存在子表格的数据源中，并在添加一个保存数据，用于在数据源变动后，数据是完整的。

  $.ajax({
          type: "post",
          url: this.baseURL + "XXX",
          dataType: "json",
          data: JSON.stringify(para),
          contentType: "application/json;charset=utf-8",
          success: function (res) {
            if (res.flag == 'success') {
            //主表格数据源
              _this.nqDetailData1 = res.data.personList;
              //子表格数据源
              _this.nqDetailData2 = res.data.detilList;
              //子表格完整数据源备份
              _this.nqDetailData2All = res.data.detilList;
            }
          }
        });

复选主要功能如下：
主要思维： 在主表格勾选时，下面的子表格能根据主表格的 id 切换数据，但是由于主表格和子表格的数据都会有勾选。我将在主表格事件中复制子表格勾选的数据，以便在子表格数据发生变动后，勾选无法回显问题。

	//主表格事件
      handleSelChange1(val) {
        this.multipleSelection = val;  //存储勾选的值
        //如果子表格有勾选的值，则拷贝到 selectAllList 变量中，作用就是在 子表格 multipleSelection2 的数据变动时，selectAllList 能保存住上一次勾选的信息，使得在子表格刷新时 勾选 不见了。
        if (this.multipleSelection2.length > 0) {
          this.selectAllList = Object.assign([], this.multipleSelection2);
        }
        // 选择主表格，加载下面的表格数据
        //如果主表格未被选中时，需将所有子表格数据展示，选择时将子表格对应的数据显示。
        if (this.multipleSelection.length > 0) {
        //勾选主表格时：
          let newNqDetailData2 = [];
          this.multipleSelection.forEach(element => {
            this.nqDetailData2All.forEach(item => {
              if (element.id == item.personId) {
                newNqDetailData2.push(item);
              }
            })
          })
          this.nqDetailData2 = newNqDetailData2;
        } else {
        //未勾选主表格。
           this.nqDetailData2=this.nqDetailData2All;
        }

        // 将未勾选的父表格中勾选的子表格明细部分去掉。
        if (this.selectAllList.length > 0) {
          let removeEle = []; //获取到要移除的数组的值。
          this.selectAllList.forEach(element => {
            let exist = this.multipleSelection.some(item => element.personId == item.id);
            if (!exist) {
              removeEle.push(element);
            }
          });

          // 将未勾选的 removeEle 的值 从 selectAllList  去除。
          let a = [];
          removeEle.forEach(element => {
            this.selectAllList = this.selectAllList.filter(item => element != item)
          })
        }

		//当子表格刷新时，将上一次保存的勾选值复现。
        if (this.selectAllList.length > 0) {
          this.$nextTick(() => {
            this.selectAllList.forEach(row => {
              this.$refs.nqDetailData2.toggleRowSelection(row, true);
            });
          });
        }

      },
      //子表格事件
      handleSelChange2(val) {
     	 //子表格保存勾选值
        this.multipleSelection2 = val;
      },