el-tree动态设置disabled属性，适用于新增、编辑、查看都是一个页面

最新推荐文章于 2024-03-20 10:23:40 发布

webA_zi

最新推荐文章于 2024-03-20 10:23:40 发布

阅读量5.2k

点赞数 2

文章标签： vue elementui

本文链接：https://blog.csdn.net/webA_zi/article/details/118754836

版权

这篇博客探讨了如何在Vue中使用<el-tree>组件动态改变节点的禁用状态。通过设置`props`属性和定义`disabledFn`方法，可以根据不同场景（如查看模式`see`）控制节点是否可选。当`type`为`see`时，节点将被禁用，否则保持启用状态。这种方法为前端交互提供了灵活性。

摘要由CSDN通过智能技术生成

<el-tree
        ref="tree"
        :data="dataTree"
        :props="props"
        node-key="id"
        show-checkbox
        accordion
      />

 props: {
        label: 'menuName',
        children: 'children',
        disabled: this.disabledFn
      },

```disabledFn() {
      if (this.type === 'see') {
        return true
      } else {
        return false
      }
    },
this.type为see是查看时传的值，这样就可以动态变化了