elementUI tree树形控件 根据数据动态设置禁用，全选时不可选中禁用数据

需求

根据后端返回的数据禁用数据，将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.data
          if (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 true
      return data.label.indexOf(value) !== -1
    },
    handleCheckAllChange(val) { // 列表全选/全不选
      if (this.checkAll) { // 全选
        this.$refs.leftTreeRef.setCheckedNodes(this.selectAllData)
      } else { // 全不选
        this.$refs.leftTreeRef.setCheckedKeys([])
      }
    }
    ...
  }
}
</script>