el-tree动态判断灵活设置checkbox的disabled

最新推荐文章于 2024-08-29 13:49:14 发布

maogugu0319

最新推荐文章于 2024-08-29 13:49:14 发布

阅读量2.4k

点赞数 4

分类专栏： vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/maogugu0319/article/details/123546427

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文探讨了在el-tree组件中如何高效地动态设置checkbox的disabled属性，提供了三种解决方案：一是增加不必要的递归；二是利用接口内置布尔字段；三是推荐使用回调函数实现灵活判断。最后给出了适用的代码示例。

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

需求：

el-tree动态判断设置checkbox的disabled

在这里插入图片描述

常见的处理方式一:(不建议)：

在接口获取到data后，进行递归，根据对应的算法，增加disabled的字段

缺点：

平白无故增加一次递归，效率和代码量不理想

常见的处理方式二：(适用与接口内有现成的boolean字段和disabled对应)

el-tree的props内设置{disabled : 'isDisabled '}(详见下方代码)

优点：

简单、快速

缺点：

对接口有一定要求，且拓展性和灵活性较弱

常见的处理方式三：（推荐，万金油方案，适用所有场景，且灵活度和拓展性高）

通过开头图片可知，disabled也可以接收一个回调方法，并根据其return值进行判断
（详见下方代码）

优点:

性能好，对后端无依赖，灵活度高，拓展性高，可灵活应对各种需求变更的场景

缺点：

暂无发现，欢迎补充

附代码

<!-- template -->
<el-tree
      ref="elTree"
      :data="data"
      :props="defaultProps"
/>

<!-- script -->
data () {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        //支持func和Boolean
        // disabled : 'isDisabled ' //方案二、若有现成的boolean字段，可直接配置字符串
        disabled (data, node) { //方案三、若需要算法建议使用func,return一个boolean值
          return data.type === '1'
        }
      },
    }
  },