上海著名网站建设自己建网站

需求

根据后端返回的数据禁用数据，将tree结构对应的数据设置为禁用状态，并且在点击全选后不可选中禁用数据。

效果

根据数据动态设置禁用

全选时不可选中禁用数据

代码

<template>...<div class="list-box"><div class="left"><h3 class="list-title"><el-checkbox v-model="checkAll"style="margin-right: 15px;"@change="handleCheckAllChange"></el-checkbox><span>全部员工</span></h3><div class="list-main"><el-input placeholder="输入关键字进行过滤"size="small"v-model="filterText"style="margin-bottom: 10px;"></el-input><el-tree class="filter-tree"ref="leftTreeRef"node-key="id"show-checkbox:data="deptUser":props="defaultProps"default-expand-all:filter-node-method="filterNode":default-checked-keys="ruleForm.users"@check-change="handleCheckChange"></el-tree></div></div>...</div>...
</template><script>
...
export default {import API from '@/api.js'...data() {return {...checkAll: false, // 是否全选filterText: '', // 关键字过滤deptUser: [], // 部门员工树selectAllData: [], // 可全选数据...defaultProps: {children: 'children',label: 'label',disabled: 'disabled'}}},watch: {filterText(val) {this.$refs.leftTreeRef.filter(val)}},...methods: {getDeptUser() { // 获取部门员工api.GetDeptUser().then(res => {if (res.code === 200) {this.deptUser = res.dataif (res.data2.length > 0) {this.setDisabled(this.deptUser, res.data2)this.selectAllData = this.setNoDisAll(JSON.parse(JSON.stringify(this.deptUser))) // 设置可全选的数据（删除不可选的数据）}...} else {this.$message.error('错误')}})},setDisabled(nodes, disabledArr) { // 设置禁用节点 参数1要处理的数据（树结构） 参数2要禁用的数据（数组）nodes.forEach(node => {if (disabledArr.includes(node.id)) {node.disabled = true}if (node.children && node.children.length > 0) {this.setDisabled(node.children, disabledArr)}})},setNoDisAll(nodes) { // 设置可全选的数据 （删除禁用数据）const arr = []for (let i = 0; i < nodes.length; i++) {const item = nodes[i]if (item.disabled) {nodes.splice(i--, 1)} else {if (item.children && item.children.length > 0) {item.children = this.setNoDisAll(item.children)}arr.push(item)}}return arr},filterNode(value, data) {if (!value) return truereturn data.label.indexOf(value) !== -1},handleCheckAllChange(val) { // 列表全选/全不选if (this.checkAll) { // 全选this.$refs.leftTreeRef.setCheckedNodes(this.selectAllData)} else { // 全不选this.$refs.leftTreeRef.setCheckedKeys([])}}...}
}
</script>