el-tree对已知节点设置disable

最新推荐文章于 2025-02-26 11:51:18 发布

原创最新推荐文章于 2025-02-26 11:51:18 发布 · 4.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

本文记录了在Vue.js项目中使用ElementUI的el-tree组件，如何根据已知节点ID动态设置节点为禁用状态。内容包括从后台获取树形数据，以及通过数据判断来实现特定节点的禁用功能。

记录项目遇到的el-tree禁用已知节点问题

<el-form-item label="角色权限">
    <el-tree
      ref="tree"
      :data="menuData"
      show-checkbox
      node-key="node_id"
      :props="defaultProps2"
      :default-checked-keys="checkedId"
    />
</el-form-item>

从后台动态获取的树的数据
项目需求要把其中的某一个节点设置为禁用
实现：
在data中配置el-tree的props
我这里是已知节点的数据判断节点id来设置disabled

defaultProps2: {
  children: 'children',
  label: 'node_name',
  disabled: function(data, node) {
    // 禁用回收站选项
    if (data.node_id == 13 || data.node_id == 52) {
      return true
    }
  }
}