实现效果
表头
<el-table
ref="elTable"
v-loading="loading"
size="mini"
element-loading-text="加载中"
element-loading-spinner="el-icon-loading"
:data="tableData"
row-key="id"
border
:row-class-name="rowClassNameFun"
:header-row-class-name="headerRowClassName"
@select="selectFun"
@select-all="selectAllFun"
>
方法
handleData(tableData) {
if (tableData.length !== 0) {
for (const item of tableData) {
item.isSelect = false
if (item.children && item.children.length !== 0) {
this.handleData(item.children)
}
}
}
return tableData
},
selectFun(selection, row) {
this.setRowIsSelect(row)
},
setRowIsSelect(row) {
if (row.isSelect == 'half') {
row.isSelect = false
this.$refs.elTable.toggleRowSelection(row, true)
}
row.isSelect = !row.isSelect
const that = this
function selectAllChildrens(data) {
data.forEach((item) => {
item.isSelect = row.isSelect
that.$refs.elTable.toggleRowSelection(item, row.isSelect)
if (item.children && item.children.length) {
selectAllChildrens(item.children)
}
})
}
function getSelectStatus(selectStatuaArr, data) {
data.forEach((childrenItem) => {
selectStatuaArr.push(childrenItem.isSelect)
if (childrenItem.children && childrenItem.children.length) {
getSelectStatus(selectStatuaArr, childrenItem.children)
}
})
return selectStatuaArr
}
function getLevelStatus(row) {
if (row.parentId) {
if (!row.children || !row.children.length) {
return 3
} else {
return 2
}
} else {
if (row.children && row.children.length) {
return 1
} else {
return 4
}
}
}
let result = {}
function getExplicitNode(data, parentId) {
data.forEach((item) => {
if (item.id == parentId) {
result = item
}
if (item.children && item.children.length) {
getExplicitNode(item.children, parentId)
}
})
return result
}
function operateLastLeve(row) {
let selectStatuaArr = []
const item = getExplicitNode(that.tableData, row.parentId)
selectStatuaArr = getSelectStatus(selectStatuaArr, item.children)
if (
selectStatuaArr.every((selectItem) => {
return selectItem == true
})
) {
item.isSelect = true
that.$refs.elTable.toggleRowSelection(item, true)
} else if (
selectStatuaArr.every((selectItem) => {
return selectItem == false
})
) {
item.isSelect = false
that.$refs.elTable.toggleRowSelection(item, false)
} else {
item.isSelect = 'half'
}
if (item.parentId) {
operateLastLeve(item)
}
}
const levelSataus = getLevelStatus(row)
if (levelSataus == 1) {
selectAllChildrens(row.children)
} else if (levelSataus == 2) {
selectAllChildrens(row.children)
operateLastLeve(row)
} else if (levelSataus == 3) {
operateLastLeve(row)
}
},
checkIsAllSelect() {
this.oneProductIsSelect = []
this.tableData.forEach((item) => {
this.oneProductIsSelect.push(item.isSelect)
})
const isAllSelect = this.oneProductIsSelect.every((selectStatusItem) => {
return selectStatusItem == true
})
return isAllSelect
},
selectAllFun(selection) {
const isAllSelect = this.checkIsAllSelect()
this.tableData.forEach((item) => {
item.isSelect = isAllSelect
this.$refs.elTable.toggleRowSelection(item, !isAllSelect)
this.selectFun(selection, item)
})
},
rowClassNameFun({ row }) {
if (row.isSelect == 'half') {
return 'indeterminate'
}
},
headerRowClassName({ row }) {
const oneProductIsSelect = []
this.tableData.forEach((item) => {
oneProductIsSelect.push(item.isSelect)
})
if (oneProductIsSelect.includes('half')) {
return 'indeterminate'
}
return ''
}
样式
::v-deep .indeterminate {
.el-checkbox__input {
&.is-checked {
.el-checkbox__inner::after {
transform: scale(0.5);
}
}
.el-checkbox__inner {
background-color: #30AD89 ;
border-color: #30AD89;
}
.el-checkbox__inner::after {
content: "";
position: absolute;
display: block;
background-color: #fff;
height: 2px;
transform: scale(0.5);
left: 0;
right: 0;
top: 5px;
width: auto !important;
border-color: #c0c4cc !important;
}
}
}