el-table实现父节点和子节点选择后背景颜色高亮
客户要求点击多选的时候,需要对选中的行都进行高亮,同时全选的时候要把所有的子节点也选上,通过了很多方法尝试,最后简单实现,el-table的方法属性参考element-ui:https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes
亲测可以,下面直接上代码:
html主要代码
<template>
<div class="app-container">
<el-table
ref="multipleTable"
v-loading="listLoading"
:data="list"
size="small"
style="width: 100%"
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
lazy
:load="getChildrenList"
@sort-change="sortChange"
@selection-change="handleSelectionChange"
@select="handleSelection"
@select-all="selectAll"
@row-click="handleRowClick"
:expand-row-keys="tableExpands"
:row-class-name="tableRowClassName"
>
<el-table-column type="selection" width="44px"></el-table-column>
......省略
</el-table>
</div>
<template>
js主要代码
<script>
data() {
return {
list: [], //父节点
number: [], //存放选中的行的唯一标识
listData: [] //父节点和子节点存放为新数组
}
},
methods: {
// 父节点和子节点加入新的数组
getList() {
this.list = [];
this.numbers = [];
this.listLoading = true;
this.listQuery.SkipCount = (this.page - 1) * this.listQuery.MaxResultCount;
api.pagemain(this.listQuery).then(res=>{
this.list = res.items;
this.listData = JSON.parse(JSON.stringify(this.list)) //定义一个新的数组存放父节点,深拷贝list到listaData,【主要代码】
this.listLoading = false;
})
},
getChildrenList(tree, treeNode, resolve) {
this.listLoading = true;
api.pagesub(tree.id).then(res=>{
resolve(res.items);
this.list.map((item,i) => {
if (item.id == tree.id) {
item.children = response.items
}
});
this.listData = [...this.listData,...res.items] //子节点和父节点存放到listData数组,每次点击展开子节点都会调用一次接口获取子节点,【主要代码】
this.listLoading = false;
});
},
handleSelectionChange(val,row) {
this.multipleSelection = val;
},
handleSelectionChange(val,row) {
this.multipleSelection = val;
},
// 全选/取消全选
selectAll(selection){
this.checkedKeys = !this.checkedKeys;
this.splite(this.listData, this.checkedKeys);
},
/**
* 处理数据
*/
splite(data, flag) {
if(flag) {
this.numbers = [] //全选的时候初始化选中的number数组
//全选时获取所有的父节点和子节点的唯一表示
data.map((item, i) => {
if (this.numbers.indexOf(item.id) == -1) {
this.numbers.push(item.id);
} else {
this.numbers.splice(this.numbers.indexOf(item.id), 1);
}
})
} else {
this.listData.map((item, i) => {
this.numbers.splice(this.numbers.indexOf(item.id), 1);
})
}
data.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row, flag);
if (row.children != undefined) {
this.splite(row.children);
}
});
},
//当用户手动勾选数据行的 Checkbox 时触发的事件
handleSelection(val, row) {
this.meansId(row)
},
//当某一行被点击时会触发该事件
handleRowClick(row, column, event) {
// this.$refs.multipleTable.clearSelection();
this.$refs.multipleTable.toggleRowSelection(row);
this.meansId(row)
},
//公共提取行ID的方法
meansId(row) {
this.listData.forEach((item, i) => {
if (item.id == row.id) {
if (this.numbers.indexOf(item.id) == -1) {
this.numbers.push(item.id);//最好用唯一表示,不建议用数组下标,我这里用了id
} else {
this.numbers.splice(this.numbers.indexOf(item.id), 1);//不选中数组中删除
}
}
});
},
// 选中背景色
tableRowClassName({ row, rowIndex}) {
let color = "";
this.numbers.forEach((r, i) => {
if (row.id === r) { //判断如果行中的id和numbers存放的id有一样的就用样式颜色
color = "warning-row";
}
});
return color;
}
}
</script>
style主要代码
<style rel="stylesheet/scss" lang="scss" scoped>
.el-table >>> .warning-row {
background-color: #f5f7fa;
}
</style>
成品效果图
如果有更好的办法,也欢迎交流。