admin管理员组

文章数量:1641425

需求：

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'
        }
      },
    }
  },

本文标签： 灵活动态treeELCheckBox

版权声明：本文标题：el-tree动态判断灵活设置checkbox的disabled 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729318023a1195537.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。