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