``` <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: "二級" }, ], }, ], }, ], ```