需要实现的需求如下:
1.勾选父级的时候,子级全部勾选
2.取消勾选父级,子级全部取消勾选
3.当子级或孙级有任何一个被勾选,其父级爷级仍被勾选
4.子级全部取消勾选,父级也取消勾选
5.当取消勾选最后一个子级,爷级没有取消勾选问题
.......
需要用到属性(parentId,isChecked) 父Id 和 是否勾选参数
并通过得到的勾选集合获取被勾选的id数组。(因为时间有限,只实现了三级结构)
html部分代码
<el-table
:data="tableData"
row-key="FYXMID"
ref="mytable"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@select="select"
@select-all="selectAll">
<el-table-column type="selection" :reserve-selection="true" width="50">
</el-table-column>
</el-table>
js部分代码
// 获取表格数据方法(初始化)
loadTableData() {
this.isLoading = true
axios.post('').then(res => {
this.tableData = res.data.list
// 默认初始化选中状态
const baseChoose = (data)=>{
if(data.children && data.children.length > 0){
data.children.forEach((item)=>{
if (item.ISDEL == '1'){
item.isChecked = true
this.addId(item)
this.$refs.mytable.toggleRowSelection(item, true)
}else{
item.isChecked = false
this.deleteId(item)
this.$refs.mytable.toggleRowSelection(item, false)
}
baseChoose(item)
})
}
}
this.$nextTick(()=>{
this.tableData.forEach(row => {
// 如果该属性为1 为选中状态
if (row.ISDEL == '1') {
row.isChecked = true
this.addId(row)
this.$refs.mytable.toggleRowSelection(row, true)
baseChoose(row)
}else{
row.isChecked = false
this.deleteId(row)
this.$refs.mytable.toggleRowSelection(row, false)
baseChoose(row)
}
});
this.isLoading = false
})
})
},
// 全选方法
selectAll (selection) {
const handlerChecked = (data,flag)=>{
if(data.children && data.children.length > 0){
data.children.forEach((item)=>{
item.isChecked = flag
this.$refs.mytable.toggleRowSelection(item, flag)
if(flag){
this.addId(item)
}
handlerChecked(item,flag)
})
}
}
// 判断当前是否有已选中的
let rA = this.tableData.some(el => {
let r = false
if (el.children) {
r = el.children.some(e => e.isChecked)
}
if (r) return r
return el.isChecked
})
// 若有选中则全部取消,否则全部选中
if (rA) {
this.tableData.forEach(el => {
el.isChecked = false
this.$refs.mytable.toggleRowSelection(el, false)
handlerChecked(el,false)
})
this.saveParam = []
// 取消全部勾选方法
this.$refs.mytable.clearSelection();
} else {
this.tableData.forEach(el => {
el.isChecked = true
this.$refs.mytable.toggleRowSelection(el, true)
this.addId(el)
handlerChecked(el,true)
})
}
},
// 选择勾选框方法
select (selection, row) {
// 定义父节点
let pNode
// 获取父节点
const getPNode = (data,pid) =>{
if (data.children && data.children.length > 0){
data.children.forEach(item=>{
if(item.FYXMID === pid){
pNode = item
}
getPNode(item,pid)
})
}
}
// 选中
if (selection.some((el) => { return row.FYXMID === el.FYXMID }) && !row.isChecked) {
row.isChecked = true
this.addId(row)
// 如果选中有子级
if (row.children) {
this.setChildren(row.children, true)
}
// 如果选中有父级
if (row.PARENTID) {
this.tableData.forEach((item)=>{
if(item.FYXMID === row.PARENTID){
pNode = item
}
getPNode(item,row.PARENTID)
})
this.$refs.mytable.toggleRowSelection(pNode, true)
pNode.isChecked = true
this.addId(pNode)
// 判断是否父节点还有父节点
let ppNode
if(pNode.PARENTID){
this.tableData.forEach((item)=>{
if(item.FYXMID === pNode.PARENTID){
ppNode = item
}
})
this.$refs.mytable.toggleRowSelection(ppNode, true)
ppNode.isChecked = true
this.addId(ppNode)
}
}
} else {
console.log('未选中')
row.isChecked = false
this.deleteId(row)
if (row.children && row.children.length>0) {
this.setChildren(row.children, false)
}
// 判断是否取消勾选的节点有父级
if (row.PARENTID) {
// 定义检查是否还有其他节点勾选的参数
let isAll = false
// 检查是否还有同级节点(或者子级节点)勾选
let isCheckChild = (data)=>{
if (data.children && data.children.length>0){
data.children.forEach(child=>{
if(child.isChecked){
isAll = true
}
isCheckChild(child)
})
}
}
// 多层遍历获取父节点
this.tableData.forEach((item)=>{
if(item.FYXMID === row.PARENTID){
pNode = item
}
getPNode(item,row.PARENTID)
})
// 判断是否父节点还有父节点
let ppNode
if(pNode.PARENTID){
this.tableData.forEach((item)=>{
if(item.FYXMID === pNode.PARENTID){
ppNode = item
}
})
}
// 先进行父节点相关操作
isCheckChild(pNode)
if(isAll) {
if (!pNode.children.some(el => el.isChecked == true)) {
this.$refs.mytable.toggleRowSelection(pNode, true)
pNode.isChecked = true
this.addId(pNode)
}
}else{
if (!pNode.children.some(el => el.isChecked == true)) {
this.$refs.mytable.toggleRowSelection(pNode, false)
pNode.isChecked = false
this.deleteId(pNode)
}
}
// 如果有爷爷节点
if(ppNode){
isAll = false
isCheckChild(ppNode)
if(isAll) {
if (!ppNode.children.some(el => el.isChecked == true)) {
this.$refs.mytable.toggleRowSelection(ppNode, true)
ppNode.isChecked = true
this.addId(ppNode)
}
}else{
if (!ppNode.children.some(el => el.isChecked == true)) {
this.$refs.mytable.toggleRowSelection(ppNode, false)
ppNode.isChecked = false
this.deleteId(ppNode)
}
}
}
}
}
},
// 设置子级勾选状态方法
setChildren (children, type) {
// 编辑多个子层级
children.map((child) => {
this.toggleSelection(child, type)
child.isChecked = type
if(type){
this.addId(child)
}else{
this.deleteId(child)
}
if (child.children && child.children.length > 0) {
this.setChildren(child.children, type)
}
})
},
// 设置选中框选中方法
toggleSelection (row, select) {
if (row) {
this.$nextTick(() => {
this.$refs.mytable.toggleRowSelection(row, select)
})
}
},
// 增加选中id方法
addId(o) {
let id = o.FYXMID
if (this.saveParam.indexOf(id) < 0) {
this.saveParam.push(id)
}
},
// 删除选中id方法
deleteId(o) {
let id = o.FYXMID
this.saveParam = this.saveParam.filter(item => item !== id);
},
代码可能有点紊乱,在参考蓝胖子的多啦A梦的原有方法上进行改进。(仅适用于树形结构小于三层的表格,多的需要再进行往上遍历)