el-tree可选择中实现单选效果

最新推荐文章于 2025-03-19 19:43:54 发布

用户147258369

最新推荐文章于 2025-03-19 19:43:54 发布

阅读量1.4k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/hyq_07_27/article/details/131600592

版权

这篇文章描述了如何在Vue应用中使用el-tree组件进行数据绑定和事件处理。通过设置属性如`node-key`，`show-checkbox`和`check-strictly`，实现了节点选择功能。`handleCheckChange`函数用于处理节点选中变化，当有两个节点被选中时，代码会强制切换到单选模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-tree
          ref="selectTree"
          class="Treecss"
          :data="editableTabs"
          node-key="id"
          :props="{value: 'id',label: 'name', children: 'childTreeList',}"
          :show-checkbox="true"
          :default-checked-keys="[id]"
          :check-strictly="true" 
          :check-on-click-node="true"
          @check="handleCheckChange">
        </el-tree>

//弹窗选中库，node 该节点所对应的对象、list 树目前的选中状态对象
    handleCheckChange(node,list){
      this.id=node.id;
     //选中事件在选中后执行，当lis中有两个选中时，使用setCheckedKeys方法，选中一个节点
     if (list.checkedKeys.length == 2) {
            //单选实现
            this.$refs.selectTree.setCheckedKeys([node.id]);
     }
    }