vue el-tree实现单选

最新推荐文章于 2025-03-28 15:18:35 发布

原创最新推荐文章于 2025-03-28 15:18:35 发布 · 2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #js

收录于

这篇博客介绍了如何在Vue.js项目中利用Element UI的el-tree组件实现懒加载和单选功能。关键在于设置正确的node-key以匹配后端返回的id，并通过setCheckedKeys方法确保单选行为。在handleCheck方法中，当有节点被选中时，将checkedKeys设置为当前选中节点的id，从而实现单选。懒加载则可以通过load属性和提供的加载方法完成。

在公司做项目中遇见这样一个要求，树形结构采用懒加载外加只能单选

 <el-tree
            :data="data"
            class="filter-tree filter-tree-right"
            :load="treeLoad"
            :lazy="true"
            :props="defaultProps"
            node-key="orgStructureId"
            show-checkbox
            :check-strictly="true"
            :filter-node-method="filterNode"
            @check="handleCheck"
            :setCheckedNodes="setCheckedNodes"
            ref="tree"
          >
          </el-tree>

上面的node-key最好采用后端所返回的id，我这里是后端返回的id，id对不上的情况下，是不能实现单选的！id一定要对上。

 handleCheck(nodes, resolve) {
      //nodes节点所对应的对象；resolve选中状态对象
      if (resolve.checkedKeys.length > 0) {
        this.$refs.tree.setCheckedKeys([nodes.orgStructureId]);
      }
    },
这里就是选择时候的代码，文档上面对setCheckedKeys有详细的说明，去参考下文档就能明白了

单选就这样实现了。懒加载就不用在说了。文档上面看就能明白