el-table 默认勾选数据

目录

效果图

 步骤:

1. 看elementui 官网上的案例,用到的方法是自带的 toggleRowSelection

 2. 思路 


原委

       选中主表中的一条数据;判断与子表中的数据是否关联(如果子表的关联ID==主表的ID,则子表的这条数据显示被勾选)。

效果图

 步骤:

1. 看elementui 官网上的案例,用到的方法是自带的 toggleRowSelection

 2. 思路 

    判断 选中的这条数据的ID与弹窗里面的数据进行匹配,建一个临时数组,如果匹配成功,放入临时数组中,然后使用官网给的方法。

代码:

//1. 获取主表选中的数据
roleID =1

//弹窗
//2.  调接口获取子表格数据
that.$API.GetDepartmentUser(param).then((res) => {
        let tempTabledata = JSON.parse(res.data.data);
        
        that.$refs.cummonTable.SettableData(tempTabledata);
        this.getselectData(tempTabledata); // lu 然后掉方法,这个方法就是给子表关联ID与主表的ID一样的显示被勾选
      });


/**
     * 3. 获取==角色ID的数据,页面展示被勾选
     */
    getselectData(data) {
      
      let tempselectData = []; //临时数组
      data.map((item) => {
        // 遍历 子表数据data中RoleID(关联ID)== roleID(主表ID),放入新数据
        if (item.RoleID == this.RoleID) {
          tempselectData.push(item);
        }
      });
      console.log(tempselectData, "遍历之后的数据");
      let rows = tempselectData;
      //下面这个就是elementui 提供的方法
      if (rows) {
        rows.forEach((row) => {
          if (this.dialogVisible) {
            this.$nextTick(() => {
              this.$refs.cummonTable.$refs.table.toggleRowSelection(row, true);  //true 说明显示被勾选
            });
          }
        });
      } else {
      }
    },

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值