分配权限树形结构怎么做

最新推荐文章于 2023-07-29 00:16:28 发布

原创

最新推荐文章于 2023-07-29 00:16:28 发布 · 448 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章展示了在Vue.js应用中如何使用ElementUI的el-tree组件来创建一个树形控件，用于角色权限分配。它涉及到数据绑定、默认选中项、递归方法获取所有权限以及处理分配和取消分配权限的逻辑。当用户点击确定按钮时，系统会将选中的权限ID发送到服务器进行分配操作。

1.html结构

<!-- 树形控件  show-checkbox增加可选框   :props="treeProps"绑定属性  node-key="id"每个属性的唯一标识  default-expand-all默认展开所有节点-->
      <!-- :default-checked-keys="defKeys"表示树形控件里面默认选中的权限-->
      <el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="treeRef"></el-tree>

2.data（）里面定义的数据

 // 所有权限的数据
      rightslist: [],
      // 树形控件的属性绑定对象
      treeProps: {
        label: 'authName',
        children: 'children',
      },
      // 默认选中的权限
      defKeys: [],
      // 当前即将分配权限的角色id
      roleId: '',