苏州工业园区两学一做教育网站重庆城乡建设信息网

• 背景：项目上需要实现树状选择，点击父级禁用子级的功能，element组件本身没有该配置项
• 说明：需要实现几个功能点：点击父级禁用子级；再次点击取消禁用；仅回填所选级；上下级不关联
• 实现代码：

// 获取树状结构时保存一份原始数据-用于下次禁用前恢复状态
this.originTreeList = _.cloneDeep(this.treeOptions) // 保存原始数据// 选项变化时候进行处理
async onChange(val) {this.treeOptions = _.cloneDeep(this.originTreeList) // 还原选项状态this.handleDisable() // 处理禁用... // 其他操作
}
// 禁用处理
async handleDisable() {await this.$nextTick()_.forEach(this.$refs.packageTree.getCheckedNodes(), (e) => {this.disableChildren(e)})
},
disableChildren(node) {if (node.children) {_.forEach(node.children, (child) => {this.$set(child.data, 'disabled', true)this.disableChildren(child)})}
},