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

需求：在创建时通过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
    }
  }
}