- 实现角色列表的添加角色、修改角色、删除角色的功能
这几个功能和用户列表的实现逻辑是一样的，在此基础上，有了更好的代码复用，添加和修改基于两个对话框，都用了同一份数据addRolesList，和同样的校验规则，添加与修改的不同之处在于，添加按钮点击事件只需要单纯的用一个变量决定对话框的显示与否，而修改按钮则需要编写事件处理函数，在事件处理函数中通过ID获取到ID对应的数据，将数据渲染到对话框上，供用户修改。
- 实现列展开，用栅栏布局el-row、el-col
通过作用域插槽拿到scope.row拿到当前角色的数据，通过.chirldren拿到所有的一级权限的数据，通过for循环把每一个tag标签渲染出来，左边5列分配给一级权限，右边19列全分配给二级三级权限，在第一层for循环中，嵌套了第二次for循环，用来渲染所有的二级权限，把二级权限也设置成el-row，把6列分配给二级权限，剩余18列分配给剩下的三级权限。
好好消化，for循环嵌套的使用
<el-table-column type="expand">
<template slot-scope="scope">
<!-- 栅栏布局 -->
<el-row :class="['btborder', i1===0 ? 'tpborder' : '']" v-for="item1,i1 in scope.row.children" :key="item1.id">
<!-- 一级权限 -->
<el-col :span="5">
<el-tag>{{item1.authName}}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<!-- 二级权限 -->
<el-col :span="19">
<el-row :class="[i2===0 ? '' : 'tpborder']" v-for="(item2, i2) in item1.children" :key="item2.id">
<!-- 二级 -->
<el-col :span="6">
<el-tag type="success">{{item2.authName}}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<!-- 三级 -->
<el-col :span="18">
<el-tag type="warning" v-for="(item3, i3) in item2.children" :key="item3.id">{{item3.authName}}</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
</el-table-column>
- 实现三级权限标签删除
请求参数需要两个ID，还不知道怎么获取到，保留，明天解决！
