vue elementui 树形权限勾选 父级半联动

角色添加

 <label>权限</label>
 <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <el-tree class="m-role-tree m-width" ref="tree" :data="data" show-checkbox node-key="menuId" :default-expanded-keys="opendata" :props="defaultProps">
 </el-tree>

 export default {
    data() {
      return {
        checkAll: false,
        data: [],
        opendata: [1],
        defaultProps: {
          children: 'children',
          label: 'menuName'
        },
      }
    },
    mounted() {
      this.getTree();
    },
    methods: {
      handleCheckAllChange(val) {
        if (this.checkAll) {
          this.$refs.tree.setCheckedNodes(this.data);
        } else {
          this.$refs.tree.setCheckedKeys([]);
        }
      },
      getTree() {
        getNoParamList('/sys/permissions/list').then(res => {
          if (!res.data.code) {
            this.data = res.data.data;
          }
        })
      },
     
      send_btn() {
        let res = this.$refs.tree.getCheckedNodes()
        this.form.roleIdMenuId = [];
        res.forEach((item) => {
          this.form.roleIdMenuId.push(item.menuId)
        });
        res = this.$refs.tree.getHalfCheckedNodes();
        res.forEach((item) => {
          this.form.roleIdMenuId.push(item.menuId)
        });
      }
    },
    computed: {

    }
  }

角色编辑

 <label>权限</label>
 <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
   <el-tree class="m-role-tree m-width" ref="tree" :data="data" show-checkbox node-key="menuId" :default-expanded-keys="opendata" :props="defaultProps">
 </el-tree>

export default {
    props: ["title", "height",'params'],
    data() {
      return {
        
        checkAll: false,
        data: [],
        opendata: [1],
        defaultProps: {
          children: 'children',
          label: 'menuName'
        },
       
      }
    },
    watch: {},
    mounted() {
      this.getTree();
      this.getInfo();
    },
    methods: {
      getInfo() {
        getNoParamList('/sys/role/info?id=' + this.params).then(res => {
          if (!res.data.code) {
            this.form = res.data.data;
            var arr = [];
            if(this.form.hasOwnProperty('permissionsList')){
              for(var i=0;i<this.form.permissionsList.length;i++){
                if(this.form.permissionsList[i].type != 1){
                  arr.push(this.form.permissionsList[i].menuId)
                }
              }
            }
            this.$refs.tree.setCheckedKeys(arr);
          }
        })
      },
      handleCheckAllChange(val) {
        if (this.checkAll) {
          this.$refs.tree.setCheckedNodes(this.data);
        } else {
          this.$refs.tree.setCheckedKeys([]);
        }
      },
      getTree() {
        getNoParamList('/sys/permissions/list').then(res => {
          if (!res.data.code) {
            this.data = res.data.data;
          }
        })
      },
     
      send_btn() {
      

        let res = this.$refs.tree.getCheckedNodes()
        this.form.roleIdMenuId = [];
        res.forEach((item) => {
          this.form.roleIdMenuId.push(item.menuId)
        });
        res = this.$refs.tree.getHalfCheckedNodes();
        res.forEach((item) => {
          this.form.roleIdMenuId.push(item.menuId)
        });
       

      }
    },
    computed: {

    }
  }