如何在VUE中弹窗树形三级控件

 

对话框代码如下

<!-- 分配权限的对话框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="showSetRight"
      width="50%"
      @close="setRightDialogClosed"
    >
      <el-tree
        :data="rightsList"
        :props="treeProps"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="defKeys"
        ref="treeRef"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
       <el-button @click="showSetRight = false">取 消</el-button>
        <el-button type="primary" @click="allotRights">确 定</el-button>
      </span>
    </el-dialog>

 

数据列表

return {
      // 所有角色数据列表
      rolelist: [],
      // 控制权限对话框是否显示
      showSetRight: false,
      // 所有权限的列表
      rightsList: [],
      // 树形控件的默认属性
      treeProps: {
        children: 'children',
        label: 'authName',
      },
      // 默认选中的数组id值
      defKeys: [],
      // 角色id
      roleId: '',
    }
  },

 

展示对话框

// 展示分配权限对话框
    showSetRightDialog(role) {
      //    获取的角色的id
      this.roleId = role.id
      reqRights().then((res) => {
        if (res.data.meta.status !== 200) {
          return this.$message.error('获取权限信息失败')
        }
        console.log(res.data.data)
        this.showSetRight = true
        this.rightsList = res.data.data
        this.getLeafKeys(role, this.defKeys)//获取对应的权限数据赋值给对话框
        //console.log(this.defKeys)
      })
    },

 

通过递归的形式，获取角色下的所有权限id,并赋值给defKeys

//  通过递归的形式，获取角色下的所有权限id,并赋值给defKeys
    getLeafKeys(node, arr) {
      // 如果当前节点不包含children属性，则是三级节点
      if (!node.children) {
        return arr.push(node.id)
      }
      // 通过递归
      node.children.forEach((item) => {
        this.getLeafKeys(item, arr)
      })
    },

 

点击了对话框的确定按钮

​

    // 关闭权限对话框,清除数据
    setRightDialogClosed() {
      this.defKeys = []
    },
点击了对话框的确定按钮

// 点击了对话框的确定按钮
    allotRights() {
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys(),
      ]
​
      const idStr = keys.join(',')
​
      reqEnableRights(this.roleId,idStr).then(res=>{
        if(res.data.meta.status!==200){
            return this.$message.error('更新失败');
        }
        this.getRolesList()
        this.showSetRight = false
        return this.$message.success('更新成功')
      })  
    }