CheckBox 四级联动
权限系统经常会遇到的需求，实现 CheckBox 多级联动的效果。项目是基于 vue + element-ui. 效果图如下：
数据
数据的话，需要前后端约定好一个规则，详细代码如下：
HTML部分：
<div class="table-common-container">
<el-checkbox v-model="selcetAll" :indeterminate="indeterminateAll" @change="checkedAll($event)">全选</el-checkbox>
<table class="table" cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>系统板块</th>
<th>功能页面</th>
<th>按钮权限</th>
</tr>
</thead>
<tbody ref="tbody_t">
<template v-for="(tr, k) in tableList.items">
<tr v-for="(item, i) in tr.children" :key="i + '_' + k">
<td v-if="i === 0" :rowspan="tr.children.length">
<el-checkbox v-model="tr.has" :indeterminate="tr.indeterminate" @change="parentChange($event, tr, tableList.items)" :label="tr.displayName"></el-checkbox>
</td>
<td :key="i + '_' + i">
<el-checkbox v-model="item.has" :indeterminate="item.indeterminate" :label="item.displayName" @change="childChange($event, tr, item, tableList.items)"></el-checkbox>
</td>
<td>
<el-checkbox v-model="td.has" v-for="(td, s) in item.children" :label="td.displayName" :key="s + '_' + i"
@change="grandsonChange((checkbox = $event), tr, item, td, tableList.items, s)"></el-checkbox>
</td>
</tr>
</template>
</tbody>
</table>
</div>
javascript 部分：
export default {
data () {
return {
selcetAll: false,
indeterminateAll: false,
selectRolePermisssion: [],
tableList: {
items: [
{
name: 'SystemSettings',
displayName: '开发系统',
has: false,
children: [
{
name: 'SystemSettings.ProductCategory',
displayName: '权限一',
has: false,
children: [
{
name: 'SystemSettings.ProductCategory.GetList',
displayName: '查看',
has: false
},
{
name: 'SystemSettings.ProductCategory.Create',
displayName: '新增',
has: false
},
{
name: 'SystemSettings.ProductCategory.CreateChildren',
displayName: '新增子分类',
has: false
},
{
name: 'SystemSettings.ProductCategory.Delete',
displayName: '删除',
has: false
},
{
name: 'SystemSettings.ProductCategory.Edit',
displayName: '修改',
has: false
}
]
},
{
name: 'SystemSettings.Staff',
displayName: '权限二',
has: false,
children: [
{
name: 'SystemSettings.Staff.GetList',
displayName: '查看',
has: false,
children: []
},
{
name: 'SystemSettings.Staff.Create',
displayName: '新增',
has: false,
children: []
},
{
name: 'SystemSettings.Staff.Edit',
displayName: '修改',
has: false,
children: []
},
{
name: 'SystemSettings.Staff.ToggleActive',
displayName: '启用/禁用',
has: false,
children: []
},
{
name: 'SystemSettings.Staff.ResetPwd',
displayName: '重置密码',
has: false,
children: []
}
]
},
{
name: 'SystemSettings.RolePermission',
displayName: '权限三',
has: false,
children: [
{
name: 'SystemSettings.RolePermission.GetList',
displayName: '查看列表',
has: false,
children: []
},
{
name: 'SystemSettings.RolePermission.Create',
displayName: '新增',
has: false,
children: []
},
{
name: 'SystemSettings.RolePermission.Edit',
displayName: '修改',
has: false,
children: []
},
{
name: 'SystemSettings.RolePermission.Delete',
displayName: '删除',
has: false,
children: []
}
]
},
{
name: 'SystemSettings.CustomerLevel',
displayName: '权限四',
has: false,
children: [
{
name: 'SystemSettings.CustomerLevel.GetList',
displayName: '查看列表',
has: false,
children: []
},
{
name: 'SystemSettings.CustomerLevel.Create',
displayName: '新增',
has: false,
children: []
},
{
name: 'SystemSettings.CustomerLevel.Edit',
displayName: '修改',
has: false,
children: []
},
{
name: 'SystemSettings.CustomerLevel.Delete',
displayName: '删除',
has: false,
children: []
}
]
}
]
},
{
name: 'test',
displayName: '营建系统',
has: false,
children: [
{
name: 'test.ProductCategory',
displayName: '权限一',
has: false,
children: [
{
name: 'test.ProductCategory.GetList',
displayName: '查看',
has: false,
children: []
},
{
name: 'test.ProductCategory.Create',
displayName: '新增',
has: false,
children: []
},
{
name: 'test.ProductCategory.CreateChildren',
displayName: '新增子分类',
has: false,
children: []
},
{
name: 'test.ProductCategory.Delete',
displayName: '删除',
has: false,
children: []
},
{
name: 'test.ProductCategory.Edit',
displayName: '修改',
has: false,
children: []
}
]
},
{
name: 'test.Staff',
displayName: '权限二',
has: false,
children: [
{
name: 'test.Staff.GetList',
displayName: '查看',
has: false,
children: []
},
{
name: 'test.Staff.Create',
displayName: '新增',
has: false,
children: []
},
{
name: 'test.Staff.Edit',
displayName: '修改',
has: false,
children: []
},
{
name: 'test.Staff.ToggleActive',
displayName: '启用/禁用',
has: false,
children: []
},
{
name: 'test.Staff.ResetPwd',
displayName: '重置密码',
has: false,
children: []
}
]
},
{
name: 'test.RolePermission',
displayName: '权限三',
has: false,
children: [
{
name: 'test.RolePermission.GetList',
displayName: '查看列表',
has: false,
children: []
},
{
name: 'test.RolePermission.Create',
displayName: '新增',
has: false,
children: []
},
{
name: 'test.RolePermission.Edit',
displayName: '修改',
has: false,
children: []
},
{
name: 'test.RolePermission.Delete',
displayName: '删除',
has: false,
children: []
}
]
},
{
name: 'test.CustomerLevel',
displayName: '权限四',
has: false,
children: [
{
name: 'test.CustomerLevel.GetList',
displayName: '查看列表',
has: false,
children: []
},
{
name: 'test.CustomerLevel.Create',
displayName: '新增',
has: false,
children: []
},
{
name: 'test.CustomerLevel.Edit',
displayName: '修改',
has: false,
children: []
},
{
name: 'test.CustomerLevel.Delete',
displayName: '删除',
has: false,
children: []
}
]
}
]
}
]
}
}
},
created () {
// 从后端拿到提交的数据后，对其进行处理，渲染已选中的。
// let data = ['SystemSettings.ProductCategory.GetList', 'SystemSettings.RolePermission.GetList', 'test.ProductCategory.CreateChildren',
// 'test.Staff.Create', 'test.Staff.Edit', 'SystemSettings.ProductCategory.Create', 'SystemSettings.ProductCategory.CreateChildren', 'test.CustomerLevel.GetList']
// this.tableList.items.forEach(item => {
// item.children.forEach(first => {
// first.children.forEach(second => {
// if (data.includes(second.name)) {
// second.has = true
// } else {
// second.has = false
// }
// })
// })
// })
// this.init(this.tableList.items)
},
methods: {
testSubmit () {
console.log(this.selectRolePermisssion)
},
// 初始化
init (data) {
data.forEach((par) => {
if (par.has) {
this.selectRolePermisssion.push(par.name)
par.indeterminate = false
par.children.forEach((child) => {
this.selectRolePermisssion.push(child.name)
child.children.forEach((gson) => {
this.selectRolePermisssion.push(gson.name)
})
})
} else {
this.selcetAll = true
this.indeterminateAll = true
par.children.forEach((child) => {
if (child.has) {
this.selectRolePermisssion.push(child.name)
par.has = true
par.indeterminate = true
child.children.forEach((gson) => {
this.selectRolePermisssion.push(gson.name)
})
} else {
child.children.forEach((gson) => {
if (gson.has) {
this.selectRolePermisssion.push(gson.name)
child.has = true
child.indeterminate = true
par.has = true
par.indeterminate = true
}
})
}
})
}
})
if (
data.filter((val) => {
return val.indeterminate === true
}).length === 0 &&
data.filter((val) => {
return val.has === true
}).length === 0
) {
this.selcetAll = false
this.indeterminateAll = false
} else if (data.filter((val) => {
return val.has === true
}).length === data.length) {
this.selcetAll = true
this.indeterminateAll = false
}
},
// 总节点
parentChange (event, tr, all) {
if (event) {
tr.has = true
tr.indeterminate = false
this.selectRolePermisssion.push(tr.name)
tr.children.forEach((ele) => {
this.selectRolePermisssion.push(ele.name)
ele.has = true
ele.indeterminate = false
ele.children.forEach((child) => {
this.selectRolePermisssion.push(child.name)
child.has = true
})
})
if (
all.filter((val) => {
if (val.indeterminate) {
return val.indeterminate === true
}
}).length === 0 &&
all.filter((val) => {
return val.has === true
}).length === all.length
) {
this.selcetAll = true
this.indeterminateAll = false
} else {
this.selcetAll = true
this.indeterminateAll = true
}
} else {
tr.has = false
tr.indeterminate = false
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== tr.name
})
tr.children.forEach((ele) => {
ele.has = false
ele.indeterminate = false
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== ele.name
})
ele.children.forEach((child) => {
child.has = false
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== child.name
})
})
})
if (
all.filter((val) => {
if (val.indeterminate) {
return val.indeterminate === false
}
}).length === 0 &&
all.filter((val) => {
return val.has === true
}).length === 0
) {
this.selcetAll = false
this.indeterminateAll = false
} else {
this.selcetAll = true
this.indeterminateAll = true
}
}
},
// 父节点change
childChange (event, tr, item, all) {
if (event) {
item.has = true
this.selectRolePermisssion.push(item.name)
item.children.forEach((ele) => {
this.selectRolePermisssion.push(ele.name)
ele.has = true
})
if (
tr.children.filter((val) => {
return val.has === false
}).length <= 0
) {
tr.has = true
tr.indeterminate = false
this.selectRolePermisssion.push(tr.name)
} else {
if (
tr.children.filter((val) => {
return val.has === false
}).length === tr.children.length
) {
tr.indeterminate = false
tr.has = false
} else {
tr.has = true
tr.indeterminate = true
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== tr.name
})
}
}
if (
all.filter((val) => {
if (val.indeterminate) {
return val.indeterminate === true
}
}).length === 0 &&
all.filter((val) => {
return val.has === true
}).length === all.length
) {
this.selcetAll = true
this.indeterminateAll = false
} else {
this.selcetAll = true
this.indeterminateAll = true
}
} else {
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== item.name
})
item.children.forEach((ele) => {
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== ele.name
})
ele.has = false
})
if (
tr.children.filter((val) => {
return val.has === false
}).length <= 0
) {
tr.has = true
tr.indeterminate = false
this.selectRolePermisssion.push(tr.name)
} else {
tr.has = true
tr.indeterminate = true
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== tr.name
})
if (
tr.children.filter((val) => {
return val.has === false
}).length === tr.children.length
) {
tr.has = false
tr.indeterminate = false
item.indeterminate = false
} else {
tr.has = true
tr.indeterminate = true
item.indeterminate = false
}
}
if (
all.filter((val) => {
if (val.indeterminate) {
return val.indeterminate === false
}
}).length === 0 &&
all.filter((val) => {
return val.has === true
}).length === 0
) {
this.selcetAll = false
this.indeterminateAll = false
} else {
this.selcetAll = true
this.indeterminateAll = true
}
}
},
// 孙子节点change (checkbox = $event), tr, item, td, tableList.items, s)
grandsonChange (event, tr, item, current, all, idx) {
if (event) {
current.has = true
item.has = true
tr.has = true
item.indeterminate = true
tr.indeterminate = true
this.selectRolePermisssion.push(current.name)
if (
item.children.filter((val) => {
return val.has === false
}).length <= 0
) {
item.has = true
item.indeterminate = false
this.selectRolePermisssion.push(item.name)
if (
tr.children.filter((val) => {
return val.has === true
}).length === tr.children.length &&
tr.children.filter((val) => {
return val.indeterminate === false
}).length === tr.children.length
) {
tr.has = true
tr.indeterminate = false
this.selectRolePermisssion.push(tr.name)
} else {
tr.has = true
tr.indeterminate = true
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== tr.name
})
}
} else {
item.has = true
item.indeterminate = true
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== item.name
})
}
if (
all.filter((val) => {
if (val.indeterminate) {
return val.indeterminate === true
}
}).length === 0 &&
all.filter((val) => {
return val.has === true
}).length === all.length
) {
this.selcetAll = true
this.indeterminateAll = false
} else {
this.selcetAll = true
this.indeterminateAll = true
}
} else {
current.has = false
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== current.name
})
if (
item.children.filter((val) => {
return val.has === true
}).length <= 0
) {
item.has = false
item.indeterminate = false
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== item.name
})
if (
tr.children.filter((val) => {
return val.has === true
}).length <= 0
) {
tr.has = false
tr.indeterminate = false
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== tr.name
})
} else {
tr.has = true
tr.indeterminate = true
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== tr.name
})
}
} else {
tr.has = true
item.has = true
tr.indeterminate = true
item.indeterminate = true
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== item.name
})
this.selectRolePermisssion = this.selectRolePermisssion.filter(function (val) {
return val !== tr.name
})
}
if (
all.filter((val) => {
if (val.indeterminate) {
return val.indeterminate === false
}
}).length === 0 &&
all.filter((val) => {
return val.has === true
}).length === 0
) {
this.selcetAll = false
this.indeterminateAll = false
} else {
this.selcetAll = true
this.indeterminateAll = true
}
}
},
// 全选、取消功能
checkedAll (event) {
if (event) {
this.indeterminateAll = false
this.tableList.items.forEach((ele) => {
ele.has = true
ele.indeterminate = false
this.selectRolePermisssion.push(ele.name)
ele.children.forEach((child) => {
child.has = true
child.indeterminate = false
this.selectRolePermisssion.push(child.name)
if (child.children) {
child.children.forEach((gson) => {
gson.has = true
gson.indeterminate = false
this.selectRolePermisssion.push(gson.name)
})
}
})
})
} else {
this.indeterminateAll = false
this.selectRolePermisssion = []
this.tableList.items.forEach((ele) => {
ele.has = false
ele.indeterminate = false
ele.children.forEach((child) => {
child.has = false
child.indeterminate = false
if (child.children) {
child.children.forEach((gson) => {
gson.has = false
})
}
})
})
}
}
}
}
