上图片虽然巨丑,但这个网站确实有人用。
需求
1、动态将某一行的第几列,向下合并两行或者三行。
2、给合并的行数添加颜色
给某一行加背景色
row-class-name属性,给行设置一个固定的className,function({ row, rowIndex })
span-method 属性 合并行或列的计算方法,接一个回掉函数function({ row, column, rowIndex, columnIndex })
主要的方法是objectSpanMethod()和rowStyle()
代码
<template>
<div>
<el-table id="resultTable"
v-loading="isLoading"
:data="content"
style="width: 100%"
class="bx-photo-table"
:border="true"
:span-method="objectSpanMethod"
:row-class-name="rowStyle">
<el-table-column fixed="left"
show-overflow-tooltip
type="selection"
width="55"></el-table-column>
<el-table-column show-overflow-tooltip
prop="deviceInfo.name"
label="label"
width="125"></el-table-column>
<el-table-column prop="deviceInfo.sn"
label="label2"
width="130"
show-overflow-tooltip></el-table-column>
<el-table-column fixed="right"
width="120px"
label="操作">
<template slot-scope="scope">
<el-button type="text">详情</el-button>
<el-button type="text">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
// 给某一行添加背景色class
rowStyle({
row, rowIndex }) {
// 如果当前行有添加的className,就添加背景色
if (row.rowColor === 'blueRowbg') {
return 'blueRowbg'
} else {
return ''
}
},
reachData() {
//创建一个存放需要合并行数的数组
this.spanArr = [1]
let list = JSON.parse(JSON.stringify(this.content))
if (list.length) {
list.forEach((row, i) => {
row.lastRecordSynctime = 0
row.rowColor = ''
})
}
let pos = 0
list.reduce((old, cur, i) => {
// old 上一个元素 cur 当前元素 i 索引
if (i === 0) {
pos = 0
} else {
// 如果两条数据的lastRecordSynctime相等就把他们合并
let oneStr = cur.lastRecordSynctime
let twoStr = old.lastRecordSynctime
if (oneStr === twoStr) {
cur.rowColor = 'blueRowbg'
old.rowColor = 'blueRowbg'
this.spanArr[pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
pos = i
}
}
return cur
}, {
})
this.content = list
// 洗好的列表数据
console.log('======列表数据======', this.content)
//按照element地方法创建的数组spanArr
console.log('======spanArr======', this.spanArr)
},
// 调用elment提供的方法合并单元格
objectSpanMethod({
row, column, rowIndex, columnIndex }) {
//设置第几列合并columnIndex =1是第一列
if (5 < columnIndex && columnIndex < 12 || columnIndex === 16 || columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
// [0,0] 表示这一行不显示, [2,1]表示行的合并数
rowspan: _row,
colspan: _col
};
}
},
</script>
<style>
.blueRowbg{
background:'#488aff'
}
/***加上这个可以去掉table的hover效果***/
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
.el-table__body tr.current-row > td,
.el-table__body tr.hover-row.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td,
.el-table__body tr.hover-row.el-table__row--striped > td,
.el-table__body tr.hover-row > td {
background-color: #488aff !important;
}
</style>