vue循环生成的el-checkbox的控件双向绑定失效问题(选中、取消失效)

举报
国服第二切图仔 发表于 2022/09/26 17:17:31 2022/09/26
【摘要】 项目场景:项目场景:公司最近有个项目需要实现一个资源树(节点选中—加载图层,取消—隐藏图层)的功能。问题描述资源树我们可以用elementui的el-tree来实现功能,子节点可以选中\取消选中,这里我们可以使用插槽来自定义子节点: 通过切换checked值为true或者false来实现,一个checkbox的状态切换这里是实现资源树及自定义子节点的方法:通过循环LayerData数据源,...

项目场景:

项目场景:公司最近有个项目需要实现一个资源树(节点选中—加载图层,取消—隐藏图层)的功能。
在这里插入图片描述


问题描述

资源树我们可以用elementui的el-tree来实现功能,子节点可以选中\取消选中,这里我们可以使用插槽来自定义子节点:

  通过切换checked值为true或者false来实现,一个checkbox的状态切换

这里是实现资源树及自定义子节点的方法:
通过循环LayerData数据源, 给数据添加checked属性,并绑定到v-model上,代码如下

       <el-tree
            :data="LayerData"
             :expand-on-click-node="false"
              node-key="id"
              :default-expanded-keys="expandedKey"
              ref="tree"
              :filter-node-method="filterNode"
              :props="defaultProps"
              >
          <div slot-scope="{ node, data }"  class="selfSettingnode">
              <el-checkbox
                 v-model="data.checked"
                 @change="onLayerShow(data)"
                  >
               </el-checkbox>
            <span :title="node.label" v-html="handleMark(node.label)" @click="labelClick(data)"></span>
          </div>
      </el-tree>

因为初始数据源没有checked属性值,所以在请求回来数据(树状结构)后,博主这里对数据源进行了一个递归遍历,并循环赋值给了checked:false的值,

    initLayerData(treeList) {
      if (!treeList || !treeList.length) {
        return;
      }
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].pid === null) {
          treeList[i].nodeType = 'folder';
          treeList[i].checked=false;
        } else {
          treeList[i].nodeType = 'layer';
          treeList[i].checked=false;
        }
        this.initLayerData(treeList[i].children);
      }
    }
  }

做到这里后,以为实现了功能,看效果发现问题: 点击时候,el-checkbox没有勾上,也没变化,但是checked的数值确实是变化了,但视图没有变化,那就说明:这样给值的checked没有和组件双向绑定上!!!


原因分析:

这里我又定义了一个mock测试数据,直接给到checked:false

[{
        id: 1,
        label: '一级 1',
        checked:false,
        children: [{
          id: 4,
          label: '二级 1-1',
          checked:false,
          children: [{
            id: 9,
            label: '三级 1-1-1'
            checked:false,
          }, {
            id: 10,
            label: '三级 1-1-2',
            checked:false,
          }]
        }]
      }

用这个数据源来绑定后,可以正常选中、取消,说明双向绑定上了!
博主分析到这里大概知道什么原因了:
循环生成数据时候添加checked属性,并没有添加get set方法,使得vue监听不到checked值变化,进而不能更新view。这点,可以在浏览器vue调试中看到,点击时候 数据的checked属性 true和false是在交替变化,但是view上没同步更新。


解决方案:

 vue.$set方法来赋值,这样v-model绑定的数值可以监听checked的变化
这里将上面的方法改造一下,就完美解决我的问题了,代码如下:

    initLayerData(treeList) {
      if (!treeList || !treeList.length) {
        return;
      }
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].pid === null) {
          treeList[i].nodeType = 'folder';
          this.$set(treeList[i], 'checked', false);
        } else {
          treeList[i].nodeType = 'layer';
          this.$set(treeList[i], 'checked', false);
        }
        this.initLayerData(treeList[i].children);
      }
    }

总结:

由此可总结出,所有需要双向绑定且循环生成的控件,可能都有同类问题,都需要用vue.$set的方法来赋值,特此记录一下,解决一个elementui的小坑。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。