vue中el-tree默认选中和全部禁用

最新推荐文章于 2025-04-08 14:40:42 发布

ICanWin_lll

最新推荐文章于 2025-04-08 14:40:42 发布

阅读量3.3k

点赞数

分类专栏： VUE开发中遇到的问题文章标签： javascript 前端 vue.js elementui

本文链接：https://blog.youkuaiyun.com/ICanWin_lll/article/details/128943168

版权

VUE开发中遇到的问题专栏收录该内容

9 篇文章

订阅专栏

文章描述了在Vue应用中，如何在el-tree组件中设置默认选中的节点，并通过递归方法禁用所有已选中的选项。通过`default-checked-keys`和`default-expanded-keys`属性设置默认选中，以及在`mounted`钩子中处理数据。另外，提到了一种通过props定义禁用函数的简化方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：在创建时通过el-tree选择的数据，在详情中展示的时候也用el-tree来展示数据，要求默认选中已有数据，并且全部选项都禁用。

<template>
    <el-tree ref="tree" node-key="id" :default-checked-keys="defaultChecked" :default-expanded-keys="defaultChecked" :data="resourceList" :props="props" show-checkbox>
    </el-tree>
</template>

mounted() {
  AuthorityService.getRoleDetail(this.queryForm).then((res) => {
    this.roleInfo = res.detail
    this.resourceList = res.detail.resource
    this.defaultChecked = []
    this.dealDefaultSelected(this.resourceList) //先设置默认选中
    this.$nextTick(() => {
      this.disableAllTree(this.resourceList)   //在nextTick中禁用 顺序不能反，并且必须放到下一轮事件循环中
    })
  })
},

dealDefaultSelected(v) {
  v.forEach((item) => {
    if (item.childResource.length > 0) {
      this.dealDefaultSelected(item.childResource) //:default-checked-keys="defaultChecked"
    }
    this.defaultChecked.push(item.id)
  })
},

disableAllTree(v) {
  v.forEach((item) => {
    if (item.childResource.length > 0) {
      this.disableAllTree(item.childResource) 
    }
    this.$set(item, 'disabled', true) // :data="resourceList"中需要禁用的选中disabled=true
  })
},

还有一种更简便的禁用方式：

通过props属性定义禁用函数

data() {
  return {
    props: {
      label: 'displayName',
      children: 'childResource'，
      disbaled: this.disFn
    }
  }
},
methods:{
  disFn(v){
    if(v.num>0){
      return true
    } else {
        return false
    }
  }
}