前言
有时遇到一些需求，需要实现ElementUI中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。
一、多列合并
1.示例代码
<template>
<div class="merge-cell">
<div class="merge-cell-navbar">记录一下 el-table 合并行小技巧</div>
<div class="merge-cell-content">
<div class="merge-cell-content-container">
<el-table
:data="tableData"
border
height="100%"
:header-cell-style="
{
padding: '4px', // 设置Table表头单元内边距
backgroundColor: '#e7f0ff', // 设置Table表头背景颜色
borderColor: '#b6d1ff', // 设置Table表头边框颜色
color: '#000', // 设置Table表头文字颜色
fontSize: '13px', // 设置Table表头文字大小
fontWeight: 'normal', // 设置Table表头文字粗细
}
"
:span-method="handleSpanMethod"
:row-class-name="handleRowClassName"
@cell-mouse-enter="handleCellMouseEnter"
@cell-mouse-leave="handleCellMouseLeave"
>
<el-table-column prop="zone" label="GameZone / 服务器区域 / 游戏区域" align="center" />
<el-table-column prop="career" label="职业" width="180" align="center" />
<el-table-column label="英雄" align="center">
<el-table-column prop="hero" label="英雄姓名" width="280" align="center" />
<el-table-column prop="firstSkill" label="一技能" width="220" align="center" />
<el-table-column prop="secondSkill" label="二技能" width="220" align="center" />
<el-table-column prop="thirdSkill" label="三技能" width="220" align="center" />
<el-table-column label="操作" width="180" align="center">
<template #default="scope">
<el-tooltip effect="dark" content="收藏" placement="top" :enterable="false" :hide-after="0" @click="handleEditClick(scope.$index, scope.row)">
<el-button size="small" circle>
<el-icon size="18"><StarFilled /></el-icon>
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
export default {
data: () => ({
tableData: [
{
zone: "王者一区",
career: "坦克",
hero: "亚瑟",
firstSkill: "誓约之盾",
secondSkill: "回旋打击",
thirdSkill: "圣剑裁决",
},
{
zone: "王者一区",
career: "坦克",
hero: "吕布",
firstSkill: "方天画斩",
secondSkill: "贪狼之握",
thirdSkill: "魔神降世",
},
{
zone: "王者一区",
career: "坦克",
hero: "项羽",
firstSkill: "无畏冲锋",
secondSkill: "破釜沉舟",
thirdSkill: "霸王斩杀",
},
{
zone: "王者一区",
career: "战士",
hero: "云缨",
firstSkill: "断月",
secondSkill: "追云",
thirdSkill: "逐星",
},
{
zone: "王者一区",
career: "战士",
hero: "赵怀真",
firstSkill: "拨云见明",
secondSkill: "气定神凝",
thirdSkill: "阴阳逆转",
},
{
zone: "王者二区",
career: "刺客",
hero: "镜",
firstSkill: "开锋",
secondSkill: "裂空",
thirdSkill: "见影",
},
{
zone: "王者二区",
career: "刺客",
hero: "澜",
firstSkill: "破浪",
secondSkill: "断空",
thirdSkill: "处决",
},
{
zone: "王者二区",
career: "刺客",
hero: "李白",
firstSkill: "将进酒",
secondSkill: "神来之笔",
thirdSkill: "青莲剑歌",
},
{
zone: "王者三区",
career: "法师",
hero: "妲己",
firstSkill: "灵魂冲击",
secondSkill: "偶像魅力",
thirdSkill: "女王崇拜",
},
{
zone: "王者三区",
career: "射手",
hero: "后羿",
firstSkill: "多重箭矢",
secondSkill: "落日余晖",
thirdSkill: "灼日之矢",
},
{
zone: "王者三区",
career: "射手",
hero: "鲁班7号",
firstSkill: "河豚手雷",
secondSkill: "无敌鲨嘴炮",
thirdSkill: "空中支援",
},
{
zone: "王者三区",
career: "辅助",
hero: "孙膑",
firstSkill: "时空爆弹",
secondSkill: "时之波动",
thirdSkill: "时光流逝",
},
{
zone: "王者三区",
career: "辅助",
hero: "庄周",
firstSkill: "化蝶",
secondSkill: "蝴蝶效应",
thirdSkill: "天人合一",
},
],
first_row: {
},
second_row: {
},
}),
methods: {
/**
* 合并单元格句柄方法
*/
handleSpanMethod({
row, // 行
column, // 列
rowIndex, // 行索引
columnIndex, // 列索引
}) {
if (columnIndex === 0 || columnIndex === 1) {
// 获取当前单元格的值
const currentValue = row[column.property];
// 获取上一行相同列的值
const preRow = this.tableData[rowIndex - 1];
const preValue = preRow ? preRow[column.property] : null;
// 如果当前值和上一行的值相同，则将当前单元格隐藏
if (currentValue === preValue) {
return {
rowspan: 0, colspan: 0 };
} else {
// 否则计算当前单元格应该跨越多少行
let rowspan = 1;
for (let i = rowIndex + 1; i < this.tableData.length; i++) {
const nextRow = this.tableData[i];
const nextValue = nextRow[column.property];
if (nextValue === currentValue) {
rowspan++;
} else {
break;
}
}
return {
rowspan, colspan: 1 };
}
}
},
/**
* 鼠标移入表格事件句柄方法
*/
handleCellMouseEnter(row, column, cell, event) {
this.second_row = this.tableData.filter((item) => {
return this.filterSameKeys(item, row, ["zone", "career"]);
})[0];
this.first_row = this.tableData.filter((item) => {
return this.filterSameKeys(item, row, ["zone"]);
})[0];
},
/**
* 鼠标移出表格事件句柄方法
*/
handleCellMouseLeave() {
this.currentIndex = "";
this.currentColumnIndex = "";
this.first_row = {
};
this.second_row = {
};
},
/**
* 根据 keys 数组所有字段去做合并
*/
filterSameKeys(item, row, keys) {
let flag = true;
keys.forEach((key) => {
flag = flag && item[key] === row[key];
});
return flag;
},
/**
* 给表格行添加自定义类名
*/
handleRowClassName({
row }) {
let flag1 = this.first_row == row ? "first_row" : "";
let flag2 = this.second_row == row ? "second_row" : "";
return `${
flag1} ${
flag2}`;
},
},
};
</script>
<style lang="less" scoped>
.merge-cell {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.merge-cell-navbar {
position: relative;
width: 100%;
height: 100px;
background-color: #686868;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 25px;
}
.merge-cell-content {
position: relative;
flex: 1;
padding: 100px;
overflow: hidden;
.merge-cell-content-container {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
}
:deep(.el-table) {
td .cell {
padding: 2.5px 0;
color: #686868;
font-size: 13px;
}
.first_row td:nth-child(1),
.second_row td:nth-child(1),
.first_row.second_row td:nth-child(2) {
background: #f5f7fa !important;
}
}
/* ^ 设置Table表格边框颜色 */
:deep(.el-table--border) {
&::before {
background-color: #b6d1ff;
}
&::after {
background-color: #b6d1ff;
}
.el-table__cell {
border-color: #b6d1ff;
}
.el-table__inner-wrapper {
&::before {
background-color: #b6d1ff;
}
&::after {
background-color: #b6d1ff;
}
.el-table__border-left-patch {
background-color: #b6d1ff;
}
}
}
/* / 设置Table表格边框颜色 */
}
</style>
2.运行效果
二、单列合并
1.示例代码
<template>
<div class="merge-cell">
<div class="merge-cell-navbar">记录一下 el-table 合并行小技巧</div>
<div class="merge-cell-content">
<div class="merge-cell-content-container">
<el-table
:data="tableData"
border
height="100%"
:header-cell-style="
{
padding: '4px', // 设置Table表头单元内边距
backgroundColor: '#e7f0ff', // 设置Table表头背景颜色
borderColor: '#b6d1ff', // 设置Table表头边框颜色
color: '#000', // 设置Table表头文字颜色
fontSize: '13px', // 设置Table表头文字大小
fontWeight: 'normal', // 设置Table表头文字粗细
}
"
:span-method="handleSpanMethod"
>
<el-table-column prop="zone" label="GameZone / 服务器区域 / 游戏区域" align="center" />
<el-table-column prop="career" label="职业" width="180" align="center" />
<el-table-column label="英雄" align="center">
<el-table-column prop="hero" label="英雄姓名" width="280" align="center" />
<el-table-column prop="firstSkill" label="一技能" width="220" align="center" />
<el-table-column prop="secondSkill" label="二技能" width="220" align="center" />
<el-table-column prop="thirdSkill" label="三技能" width="220" align="center" />
<el-table-column label="操作" width="180" align="center">
<template #default="scope">
<el-tooltip effect="dark" content="收藏" placement="top" :enterable="false" :hide-after="0" @click="handleEditClick(scope.$index, scope.row)">
<el-button size="small" circle>
<el-icon size="18"><StarFilled /></el-icon>
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
export default {
data: () => ({
tableData: [
{
zone: "王者一区",
career: "坦克",
hero: "亚瑟",
firstSkill: "誓约之盾",
secondSkill: "回旋打击",
thirdSkill: "圣剑裁决",
},
{
zone: "王者一区",
career: "坦克",
hero: "吕布",
firstSkill: "方天画斩",
secondSkill: "贪狼之握",
thirdSkill: "魔神降世",
},
{
zone: "王者一区",
career: "坦克",
hero: "项羽",
firstSkill: "无畏冲锋",
secondSkill: "破釜沉舟",
thirdSkill: "霸王斩杀",
},
{
zone: "王者一区",
career: "战士",
hero: "云缨",
firstSkill: "断月",
secondSkill: "追云",
thirdSkill: "逐星",
},
{
zone: "王者一区",
career: "战士",
hero: "赵怀真",
firstSkill: "拨云见明",
secondSkill: "气定神凝",
thirdSkill: "阴阳逆转",
},
{
zone: "王者二区",
career: "刺客",
hero: "镜",
firstSkill: "开锋",
secondSkill: "裂空",
thirdSkill: "见影",
},
{
zone: "王者二区",
career: "刺客",
hero: "澜",
firstSkill: "破浪",
secondSkill: "断空",
thirdSkill: "处决",
},
{
zone: "王者二区",
career: "刺客",
hero: "李白",
firstSkill: "将进酒",
secondSkill: "神来之笔",
thirdSkill: "青莲剑歌",
},
{
zone: "王者三区",
career: "法师",
hero: "妲己",
firstSkill: "灵魂冲击",
secondSkill: "偶像魅力",
thirdSkill: "女王崇拜",
},
{
zone: "王者三区",
career: "射手",
hero: "后羿",
firstSkill: "多重箭矢",
secondSkill: "落日余晖",
thirdSkill: "灼日之矢",
},
{
zone: "王者三区",
career: "射手",
hero: "鲁班7号",
firstSkill: "河豚手雷",
secondSkill: "无敌鲨嘴炮",
thirdSkill: "空中支援",
},
{
zone: "王者三区",
career: "辅助",
hero: "孙膑",
firstSkill: "时空爆弹",
secondSkill: "时之波动",
thirdSkill: "时光流逝",
},
{
zone: "王者三区",
career: "辅助",
hero: "庄周",
firstSkill: "化蝶",
secondSkill: "蝴蝶效应",
thirdSkill: "天人合一",
},
],
first_row: {
},
second_row: {
},
}),
methods: {
/**
* 合并单元格句柄方法
*/
handleSpanMethod({
row, // 行
column, // 列
rowIndex, // 行索引
columnIndex, // 列索引
}) {
const rowspanArr = this.formatRowspanAndColspan(this.tableData, 'zone')
if (columnIndex === 0) {
// console.log('row =>', row)
// console.log('column =>', column)
// console.log('rowIndex =>', rowIndex)
// console.log('columnIndex =>', columnIndex)
// console.log('\n')
return {
rowspan: rowspanArr[rowIndex],
colspan: 1
}
}
},
/**
* 合并单元格辅助
*/
formatRowspanAndColspan(tableList, keyName) {
const keyNameList = []
tableList.forEach(
t => {
keyNameList.push(t[keyName])}
)
// console.log('keyNameList =>', keyNameList)
let prev // 上一个键名的索引
let contin = 0 // 连续相同键名个数
const computedList = [] // 计算后的键名列表
for (let i = 0; i < keyNameList.length; i++) {
if (computedList.length === 0) {
computedList.push({
'key': keyNameList[i], 'val': 1 })
} else {
if (keyNameList[prev] === keyNameList[i]) {
contin++
computedList.push({
'key': keyNameList[i], 'val': 0 })
} else {
if (contin > 0) {
const index = computedList.length - 1 - contin
const key = computedList[index].key
const val = computedList[index].val
const obj = {
'key': key, 'val': val + contin}
computedList.splice(index, 1, obj)
}
computedList.push({
'key': keyNameList[i], 'val': 1 })
contin = 0
}
}
prev = i // 将 i 赋值给 prev，以便当下一次循环时获取上一个键值的索引
}
if (contin > 0) {
const index = computedList.length - 1 - contin
const key = computedList[index].key
const val = computedList[index].val
const obj = {
'key': key, 'val': val + contin}
computedList.splice(index, 1, obj)
}
// console.log('computedList =>', computedList)
const finalList = []
computedList.forEach(
t => {
finalList.push(t.val)}
)
// console.log('finalList =>', finalList)
return finalList
},
},
};
</script>
<style lang="less" scoped>
.merge-cell {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.merge-cell-navbar {
position: relative;
width: 100%;
height: 100px;
background-color: #686868;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 25px;
}
.merge-cell-content {
position: relative;
flex: 1;
padding: 100px;
overflow: hidden;
.merge-cell-content-container {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
}
:deep(.el-table) {
td .cell {
padding: 2.5px 0;
color: #686868;
font-size: 13px;
}
.first_row td:nth-child(1),
.second_row td:nth-child(1),
.first_row.second_row td:nth-child(2) {
background: #f5f7fa !important;
}
}
/* ^ 设置Table表格边框颜色 */
:deep(.el-table--border) {
&::before {
background-color: #b6d1ff;
}
&::after {
background-color: #b6d1ff;
}
.el-table__cell {
border-color: #b6d1ff;
}
.el-table__inner-wrapper {
&::before {
background-color: #b6d1ff;
}
&::after {
background-color: #b6d1ff;
}
.el-table__border-left-patch {
background-color: #b6d1ff;
}
}
}
/* / 设置Table表格边框颜色 */
}
</style>