Element-UI级联(cascader)实现权限管理

Element-UI级联实现权限管理

最近在用element-ui练习项目重构，为了实现权限管理这个模块，花了不少功夫。

---

1.实现效果

这里是对角色的管理，可以修改删除和授权，修改是修改名字，删除就是删除角色。主要难点在于如何实现授权这个功能，点击授权之后，首先要获得后台的权限数据，如果有授权有层级，还有显示出层级效果，并且要根据用户的不同，默认选中其拥有的权限。

2.element-ui的配置

1.选择组件

element-ui里的级联样式很多，看下来还是级联面板比较符合需求。

级联面板长这样：

<el-cascader-panel :options="options"></el-cascader-panel>

代码很简单，就一行

2.配置组件

因为权限管理这个模板，用户不可能只有一种权限，所以需要多选，多选需要在级联面板中配置props

<el-cascader-panel :options="options" :props="props"></el-cascader-panel>

props:

 props: {
   
        multiple: true,//设置为多选
        value: "id", //value值和哪个值绑定
        label: "name",//label值和哪个值绑定
        children: "children"//children值和哪个值绑定
      },

这里的value、label、children属性需要根据自己的后台数据进行设置。

element-ui上提供的option格式是这样的

但是我们的后台项目提供的权限树往往是不一样的。比如我所用的后台接口提供的数据是这样的：

但是没有关系，不管我们后台的权限树列表里有那些属性，只要有这几样就可以：
1：一个用于表示id的属性(需要是独一无二的)，和props的value进行绑定；
2：一个用于表示名字的属性，这个属性会显示在级联面板中，比如我这里的name，和props的label进行绑定；
3：一个用于表示其叶子节点的属性，我这里是children，和props的children进行绑定；

3.数据双向绑定

有了以上的配置之后，还需要一个数组用于和级联面板进行选中的数据进行绑定。同时也可以显示当前用户已经拥有的权限。
那么在我们的级联面板上增加一个属性v-model