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

你的名字 2022-09-11 13:28 10阅读 0赞

角色添加

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: { 
    
        }
      }

角色编辑

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: { 
    
        }
      }