关于vue.js:eltree-树形控件-自定权限授权勾选框

效果图

不废话上代码

<template>
  <div style="width: 360px;">
    <el-tree
      :data="prdList"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <div class="tree-node" slot-scope="{node, data}">
        <span>{{node.label}}</span>
        <span v-if="!node.isLeaf">
          <el-checkbox :indeterminate="data.isIndeterminate" v-model="data.checkedFlag" @change="checkAllChange(node, data.checkedFlag)"> 全选 </el-checkbox>
        </span>
        <span v-else>
          <el-checkbox v-model="data.athrFlag" true-label="1" false-label="0" @change="clickNode(node, data)"> 经办 </el-checkbox>
          <el-checkbox v-model="data.landFlag" true-label="1" false-label="0" @change="clickNode(node, data)"> 受权 </el-checkbox>
        </span>
      </div>
    </el-tree>
  </div>
</template>
<script>
  export default {data() {
      return {
        prdList: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2',
              children: [{ id: 22, label: '四级 1-1-1'},
                {id: 23, label: '四级 1-1-2'},
                {id: 24, label: '四级 1-1-3'},
              ]
            }]
          },
          {
            id: 14,
            label: '二级 1-2',
            children: [{
              id: 19,
              label: '三级 1-2-1'
            }, {
              id: 110,
              label: '三级 1-2-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    created() {this.init()
    },
    methods: {traversalNode(list, callback) {if (!list && !Array.isArray(list)) {throw new Error('required an Array.')
        }
        for (const item of list) {
          let children = item.children;
          if (children && children.length > 0) {this.traversalNode(children, callback)
          }
          const isBreak = callback(item)
          if (isBreak) {break;}
        }
      },
      init() {this.traversalNode(this.prdList, (item) => {this.$set(item, 'athrFlag', '0')
          this.$set(item, "landFlag", '0')
          this.$set(item, 'isIndeterminate', false)
          this.$set(item, 'checkedFlag', false)
        })
      },
      checkAllChange(node, value) {this.traversalSon(node, value)
        if(node.parent) {this.traversalParent(node.parent)
        }
      },
      traversalSon(node, value) {node.childNodes.forEach((item) => {if(item.isLeaf) {
            item.data.athrFlag = value ? '1' : '0'
            item.data.landFlag = value ? '1' : '0'
          } else {
            item.data.checkedFlag = value
            item.data.isIndeterminate = false
            this.traversalSon(item, value)
          }
        })
      },
      traversalParent(node) {
        let allCount = 0 // 以后节点下 所有子节点 总数
        let checkedCount = 0 // 以后节点的所有子节点 已选个数
        let isIndeterminate = false
        node.childNodes.forEach((item) => {if(item.isLeaf) {
            allCount += 2 // 用两个复选框（经办 受权）// 经办
            if(item.data.athrFlag === '1') {checkedCount++}
            // 受权
            if(item.data.landFlag === '1') {checkedCount++}
          } else {
            allCount++
            if(item.data.checkedFlag === false && item.data.isIndeterminate === true) {isIndeterminate = true}
            if(item.data.checkedFlag) {checkedCount++}
          }
        })
        // 设置 以后节点 选中、半选、未选状态
        this.$set(node.data, 'checkedFlag', checkedCount === allCount && allCount !== 0)
        this.$set(node.data, 'isIndeterminate', isIndeterminate ? true : checkedCount > 0 && checkedCount < allCount)

        if(node.parent) {this.traversalParent(node.parent)
        }      
      },
      clickNode(node) {this.traversalParent(node.parent)
      }
    }
  };
</script>
<style scoped>
.tree-node{
  flex: 1;
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding-right: 10px;

}
</style>