最近在做项目时遇到了一个table表格需要跨行的需求,因为项目中是用到的element-ui的table表格,所以参考element官网实现了此功能,在这里记录一下。
<template>
<div>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<el-table-column
prop="num"
label="序号"
width="180"
></el-table-column>
<el-table-column
prop="address"
label="地址"
width="180"
></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "elementTest",
data() {
return {
tableData: [
{name: 'zhang', num: 11, address: '北京'},
{name: 'zhang', num: 12, address: '郑州'},
{name: 'zhang', num: 13, address: '开封'},
{name: 'wang', num: 21, address: '日照'},
{name: 'wang', num: 11, address: '烟台'},
{name: 'li', num: 31, address: '石家庄'},
{name: 'li', num: 32, address: '保定'},
{name: 'li', num: 33, address: '唐山'},
{name: 'li', num: 34, address: '秦皇岛'}
],
spanArray: [],
pos: 0 // pos为spanArray的索引
}
},
created() {
this.init(this.tableData)
},
methods: {
init(data) {
for (let i = 0; i < data.length; i++) {
if (i === 0) {
// 如果是第一条记录 向数组里面加入1 并设置索引位置
this.spanArray.push(1)
this.pos = 0
} else {
// 从第二条数据开始 判断它与前一条记录是否相等
if (data[i].name === data[i - 1].name) {
// 如果相等 将前一位元素+1 表示合并行数+1 同时向spanArr中添加元素0
// 0 表示该行不显示
this.spanArray[this.pos] += 1
this.spanArray.push(0)
} else {
// 如果不相等 向spanArr中添加元素1 同时改变索引
this.spanArray.push(1)
this.pos = i
}
}
}
console.log('this.spanArray=====', this.spanArray)
// 打印结果: [3, 0, 0, 2, 0, 4, 0, 0, 0]
},
objectSpanMethod({ rowIndex, columnIndex }){
if (columnIndex === 0) {
let _row = this.spanArray[rowIndex]
let _col = _row > 0 ? 1 : 0
console.log(`{rowspan: ${_row}, colspan: ${_col}}`)
// 打印结果
// {rowspan: 3, colspan: 1}
// {rowspan: 0, colspan: 0}
// {rowspan: 0, colspan: 0}
// {rowspan: 2, colspan: 1}
// {rowspan: 0, colspan: 0}
// {rowspan: 4, colspan: 1}
// {rowspan: 0, colspan: 0}
// {rowspan: 0, colspan: 0}
// {rowspan: 0, colspan: 0}
// {rowspan: 0, colspan: 0} 表示此行不显示
// {rowspan: 2, colspan: 1} 表示跨两行
return {
rowspan: _row,
colspan: _col
}
}
}
}
};
</script>