Requirements: According to el-table, multi-level menu check is realized, and as long as it is a menu, there is no check box, and there is no select all button . The first-level menu uses el-switch to replace the original column check box . If the sub-level Select all, then the parent el-switch will also be selected, as shown in the figure below, note: there is no column header, and the select all button in the column header has not been able to obtain its checked value. After trying many methods, it still does not work , the select all button can only select all and reverse the selection, but it cannot be realized, so I gave up.
1. Backend data
- Be sure to add a checked:false to each level of menu and add, delete, modify and check function items in the backend
- The backend must use type or something to indicate whether it is a menu or a function item
- The back-end data is as follows, multi-level list, type 0 means menu, type 1 means function item
"data": [
{
"menu_id": 1,
"menu_name": "仪表盘",
"type": 0,
"checked": false,
"children": [
{
"menu_id": 17,
"menu_name": "查看",
"type": 1,
"checked": false
}
]
},
{
"menu_id": 1,
"menu_name": "用户管理",
"type": 0,
"checked": false,
"children": [
{
"menu_id": 17,
"menu_name": "查看",
"type": 1,
"checked": false,
"children": [
{
"menu_id": 31,
"menu_name": "设备连接拓扑图隐藏或显示",
"type": 1,
"checked": false
},
}
]
},
2. el-table table implementation
- :data is the backend data
- row-key : The key value of the row data, if it is a unique value, otherwise an error will be reported
-
:show-header=false do not show the header
-
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }", the default configuration for rendering nested data, the popular point is, to judge whether there are children or not, the next level is automatically rendered
-
Mainly look at the type="selection" attribute of the first el-table-column . This attribute is to add a check box. After that, the way to use the slot is to add the el-checkbox check box as long as the type is 0 function item. Button, type 1 is the el-switch switch control
<el-table
:data="tableData"
row-key="menu_id"
style="width: 100%"
:show-header="false"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column
type="selection"
:selectable="selectable"
width="50"
>
<template slot-scope="{ row }">
<span v-if="row.type === 0"></span>
<el-checkbox
v-model="row.checked"
v-else
@change="handleCheck(row.menu_id, row.checked, row)"
></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="menu_name" label="菜单" align="left">
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope" v-if="scope.row.type == 0">
<el-switch
v-model="scope.row.checked"
active-color="#13ce66"
inactive-text="全选"
@change="swictchange($event, scope.row)"
>
</el-switch>
</template>
</el-table-column>
</el-table>3. Multi-level nested form - single selection - reverse selection el-switch
If all the function items of the sub-level are selected, then directly unselect the el-switch switch of the upper level of the sub-level, here it is recommended to copy directly
The tabledata passed in here is all the data, and the anti-selection switch implemented in a recursive manner
// 点击单行获取到数据,实现反选
handleCheck() {
this.setHandleCheck(this.tableData);
},
setHandleCheck(menuList) {
// checked变量初始化为true
let checked = true;
// 遍历菜单列表的每一个菜单，
for (let i = 0; i < menuList.length; i++) {
// []中的每一个对象存储在menu
const menu = menuList[i];
// 如果菜单中有子菜单，那么就递归重新调用菜单来更新子菜单的checked属性
if (menu.children && menu.children.length > 0) {
menu.checked = this.setHandleCheck(menu.children);
}
// 判断初始值和menu.checked的值是否为ture
checked = checked && menu.checked;
}
return checked;
},4. The el-switch controls the selection of all sub-levels. After the sub-level radio selection is not completed, click the switch to select all
// 开关状态
swictchange(flag, row) {
this.setLastRight(row, this.menulistReq, flag);
console.log(this.menulistReq, "递归得到的值");
this.setHandleCheck(this.tableData);
},
// 递归全选
setLastRight(obj, arr, flag) {
if (!obj.children) {
return;
}
// 当前对象要是没有children,就遍历children
obj.children.forEach((item) => {
item.checked = flag;
// 传递俩个实参，item在一二级都是有chilren，所以会一直调用到最后一级，最后一级是没呀chiren
this.setLastRight(item, arr, flag);
});
}5. Submit permissions
In this way, multi-level full selection and anti-selection can be realized. Finally, the el-button button is used to submit the permissions. The package of the interface is different for everyone, and the writing method may be a bit different. Table data, according to checked is true, just add menu_id to the array, and then pass it to the backend
// 分配角色权限
async allotPermission() {
this.recursionChecedTrue(this.tableData);
const menu = [...new Set(this.menulistReq)];
const res = await SetRoleManage({
menu_ids: menu,
id: this.copyrole.id_1,
});
if (res.code == 200) {
this.$message.success("角色分配成功");
}
},
// 递归获取所有checked为ture的值
recursionChecedTrue(tableData) {
tableData.forEach((item) => {
if (item.checked) {
this.menulistReq.push(item.menu_id);
}
if (item.children) {
this.recursionChecedTrue(item.children);
}
});
},This is the end of the article, I hope it will be helpful to you~~