问题描述
使用el-table结合tree结构和CheckBox实现二级复选框的全选与反选。
页面结构
<el-table
:data="dataList"
highlight-current-row
row-key="auditTypeId"
:expand-row-keys="expandKeys"
:tree-props="{ children: 'children', hasChildren: '!children.length' }"
>
<el-table-column width="50" type="index">
<template slot="header">
<el-checkbox v-model="allCheck" :indeterminate="indeterminate" @change="allCheckChange"></el-checkbox>
</template>
<template slot-scope="{ row }">
<el-checkbox
v-model="row.checked"
:indeterminate="row.indeterminate"
@change="changeItem($event, row)"
></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>
选择逻辑
/**
* @Description: 全选反选
*/
allCheckChange(val) {
this.allCheck = val
this.indeterminate = false
const list = cloneDeep(this.dataList)
list.forEach(itemA => {
itemA.checked = val
itemA.indeterminate = false
itemA.children.forEach(itemB => {
itemB.checked = val
})
})
this.dataList = list
},
/**
* @Description: 单选一行
*/
changeItem(val, row) {
if (row.children) {
row.children.forEach(item => {
item.checked = val
})
} else {
const fItem = findItemByProp(this.dataList, 'auditTypeId', row.parentGuid)
const isChildAllCheck = fItem.children.every(item => {
return item.checked
})
const isOneCheck = fItem.children.some(item => {
return item.checked
})
const list = cloneDeep(this.dataList)
for (let i = 0; i < list.length; i++) {
const item = list[i]
if (item.auditTypeId === row.parentGuid) {
item.checked = isChildAllCheck
item.indeterminate = !isChildAllCheck
if (!val && !isOneCheck) {
item.indeterminate = false
}
break
}
}
this.dataList = list
}
this.allCheck = this.dataList.every(item => {
return item.checked
})
if (this.allCheck) {
this.indeterminate = false
} else {
this.indeterminate = this.getCheckedData().length > 0
}
},
/**
* @Description: 获取选择的数据
* @param {*}
* @return {*}
*/
getCheckedData() {
const arr = []
this.dataList.forEach(itemA => {
itemA.children.forEach(itemB => {
if (itemB.checked) {
arr.push(itemB)
}
})
})
return arr
},
/**
* @Description: 递归遍历树初始化数据(返显数据)
* @param {*} data
* @return {*}
*/
recursiveProcess(data) {
const vm = this
vm.selMap.clear()
this.expandKeys = []
let ids = []
if (this.curOptions.select.length) {
const ops = this.curOptions.options
ids = getPropFromArr(ops, 'val')
}
const set = new Set()
const initData = list => {
list.forEach(item => {
item.checked = false
item.indeterminate = false
if (ids.includes(item.auditTypeId)) {
item.checked = true
// 只保留子级选择的数据
const fItem = findItemByProp(data, 'auditTypeId', item.parentGuid)
set.add(fItem.auditTypeId)
vm.selMap.set(fItem.auditTypeId, item)
}
if (item.children) {
initData(item.children)
}
})
this.expandKeys = [...set]
}
initData(data)
},