``` <el-table :data="roleList" border stripe style="margin-top: 20px"> <!-- 展开列：只需加type属性：expand--> <el-table-column type="expand"> <template slot-scope="scope"> <!--通过数组形式给第一行加上边框，其他的加下边框,ventet类是将标签纵向居中,i1是索引--> <el-row :class="['bdbt', i1 === 0 ? 'bdtop' : '', 'venter']" v-for="(item1, i1) in scope.row.children" :key="item1.id" > <!-- 渲染一级权限，加上一个箭头图标，col是列，一行总共24列--> <el-col :span="5"> <!-- closable属性：带删除按钮，点击后会触发close事件，用来删除这个菜单--> <el-tag closable @close="removeRightById(scope.row, item1.id)" >{{ item1.name }}</el-tag ><i class="el-icon-caret-right"></i> </el-col> <!-- 渲染二级和三级权限--> <el-col :span="19"> <!-- row:行，col：列，循环出子菜单，给每行添加一个上边框，去除重复的第一行上边框--> <el-row v-for="(item2, i2) in item1.children" :key="item2.id" :class="[i2 === 0 ? '' : 'bdtop', 'venter']" > <!--渲染二级权限--> <el-col :span="6"> <!-- closable属性：带删除按钮，点击后会触发close事件，用来删除这个菜单--> <el-tag type="success" closable @close="removeRightById(scope.row, item2.id)" >{{ item2.name }}</el-tag ><i class="el-icon-caret-right"></i> </el-col> <el-col :span="18"> <!-- 三级权限，closable属性：带删除按钮，点击后会触发close事件，用来删除这个菜单--> <el-tag type="warning" v-for="item3 in item2.children" :key="item3.id" closable @close="removeRightById(scope.row, item3.id)" >{{ item3.name }}</el-tag > </el-col> </el-row> </el-col> </el-row> </template> </el-table-column> <el-table-column type="index" label="#"></el-table-column ><!-- 索引列--> <el-table-column label="角色名称" prop="rolename"></el-table-column> <el-table-column label="角色描述" prop="roledsc"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" icon="el-icon-edit" size="small" >编辑</el-button > <el-button type="danger" icon="el-icon-delete" size="small" >删除</el-button > <el-button type="warning" icon="el-icon-setting" size="small" @click="showSetRinghtDialog(scope.row)" >分配权限</el-button> </template> </el-table-column> </el-table> ``` ``` roleList: [ { rolename: "主管", roledsc: "1", children: [ { id: 1, name: "权限1", children: [ { id: 1, name: "权限2", children: [ { id: 5, name: "三级" }, { id: 5, name: "三级" }, { id: 5, name: "三级" }, ], }, { id: 3, name: "二级" }, ], }, ], }, ], ```