在项目开发的时候，我们会遇到这样的需求，需要把单元格内容相同地方合并起来，假如直接用HTML标签的tr和td的话会很简单直接使用clospan和rowspan,但是在我们在使用el-table表格的时候，官方有说到可以使用span-method但是并没有仔细描述怎么写。这次我给大家带来详细教学。话不多说，上代码！
成品效果：
tableData:表格数据
spanArr: 保留合并数组的内容
count: 索引
App.vue
<template>
<el-table
border="1"
:span-method="objectspanMethod"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column>
<template slot-scope="{row}">
<el-button type="success" size="small" @click="clicks(row)">点击</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
id:1,
date: '2016-05-02',
name: '王小虎plus',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id:2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id:3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id:4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1515 弄'
}],
spanArr:[],
count:null
}
},
created(){
// 对表格数据进行处理
this.getspan()
},
methods:{
getspan(){
for(let i = 0;i<this.tableData.length;i++){
// 当索引的值为 1 的时候,对 spanArr 进行占位 设置初始值 为1
if(i == 0){
this.spanArr.push(1)
this.count = 0 // 设置 spanArr 的索引值为 1
}else{
// 当下一项表格的数据与上一项数据内容相同时
if(this.tableData[i].name == this.tableData[i - 1].name && this.tableData[i].address == this.tableData[i - 1].address){
// spanArr 的当前项值 + 1
this.spanArr[this.count] += 1
// spanArr 再进行一次占位 0
this.spanArr.push(0)
}else{
// 当内容不相等的时候，对 spanArr 进行占位 并且设置值为 1
this.spanArr.push(1)
// 当前 spanArr 的值为当前项
this.count = i
}
}
}
},
objectspanMethod({row, column ,rowIndex,columnIndex}){
if (columnIndex === 1 || columnIndex === 2) {
const rowCell = this.spanArr[rowIndex];
if (rowCell > 0) {
const colCell = 1;
return {
rowspan: rowCell,
colspan: colCell,
};
} else {
// 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
// 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
return {
rowspan: 0,
colspan: 0,
};
}
}
console.log(this.spanArr,'spanArr');
},
}
}
</script>
通过打印我们可以看出spanArr的内容：
接下来内否合并完全取决在这里：给位小伙伴再到这一步的时候，需要多打印，查看每一项是啥东西
// 在 el-table 中定义合并方法
/**
* row : 表示表格中的横向排列的每一项
* column ：表示表格中的纵向排列的每一项
* rowIndex : 横向的索引值
* columnIndex ：纵向的索引值
* */
objectspanMethod({row, column ,rowIndex,columnIndex}){
// 纵向合并单元格的索引值
if (columnIndex === 1 || columnIndex === 2) {
const rowCell = this.spanArr[rowIndex];
if (rowCell > 0) {
const colCell = 1;
return {
rowspan: rowCell,
colspan: colCell,
};
} else {
// 清除原有的单元格，必须要加，否则就会出现单元格会被横着挤到后面了！！！
// 本例中数据是写死的不会出现，数据若是动态后端获取的，就会出现了！！！
return {
rowspan: 0,
colspan: 0,
};
}
}
},
让我们再来看一下最终成果，嗯，满意~！
写到这里基本上，这次的内容基本上我们已经写完啦。有什么不懂得地方，大家可以询问，也欢迎各位大佬，来指出不对的地方。😄
