el-table序号竖行合并

Element UI el-table 竖向合并序号列
为了实现在 el-table 组件中的序号列竖向合并功能，可以利用自定义模板来替代默认的索引显示方式。通过计算属性和作用域插槽（Scoped Slot），能够实现更加灵活的数据展示效果。
自定义序号列并实现竖向合并
当需要对表格内的某些单元格进行合并操作时，可以通过设置 rowspan 和 colspan 属性来自定义每一行每一个单元格的行为。对于连续相同项，则只需要让第一个出现的位置占据多行空间即可[^2]。
下面是一个简单的例子：
<template>
<div id="app">
<!-- 定义 table -->
<el-table :data="tableData" border style="width: 100%" :cell-class-name="setCellClassName" @expand-change="handleExpandChange">
<!-- 序号列 -->
<el-table-column prop="id" label="#" width="80px" align="center">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>

<!-- 合并处理后的其他字段 -->
<el-table-column v-for="(item, index) in columns" :key="index" :prop="item.prop" :label="item.label"></el-table-column>

<!-- 需要被合并的内容 -->
<el-table-column prop="group" label="Group Name" show-overflow-tooltip></el-table-column>
</el-table>
</div>
</template>

<script>
export default {
data() {
return {
// 表头配置
columns: [
{ prop: 'name', label: 'Name' },
{ prop: 'age', label: 'Age'}
],
// 数据源
tableData: [],
spanArr: [], // 存储每组数据对应的 rowSpan 数量
position: 0,
};
},

created(){
this.initTable();
},

methods:{
initTable(){
let count = 1;
const result = [];
for(let i=0;i<10;i++){
if(i%3===0){
count++;
}
result.push({
name:`Tom${i}`,
age:i*5+Math.floor(Math.random()*10),
group:'A',
id:(++this.position)
});

if(count>1 &amp;&amp; (result.length === 9 || i===7)){
for(let j=count;j>=2;j--){
result[i-j+1].group='B';
}
count=1;
}
}

this.tableData=result;

this.getMergeCells(); // 获取需要合并的 cell 的位置信息
},

getMergeCells(){// 计算哪些地方应该合并
var _self=this;
var mergeCells=[];
var pos=0;

this.spanArr=[];// 清空数组
this.tableData.forEach((item,index)=>{
if(index===0){
this.spanArr.push(1);
pos=0;
}else{
/* 如果当前记录与前一条记录属于同一组 */
if(item.group===(this.tableData[index-1]).group){
++pos;
this.spanArr[pos]=-1;
this.spanArr[pos-1]++;
}else{
this.spanArr.push(1);
pos=index;
}
}

Object.assign({}, item,{_rowSpan:this.spanArr[index]});
mergeCells.push({row:index,column:2,rowspan:item._rowSpan,colspan:1});
});

console.log('merge cells:',JSON.stringify(mergeCells));
_self.mergeCells=mergeCells;
},

setCellClassName({row, column, rowIndex, columnIndex}){// 设置样式类名以便控制合并行为
if(columnIndex===2&amp;&amp;row._rowSpan!==undefined){
if(row._rowSpan<=0){
return "hidden";
}else{
return "";
}
}

return '';
},

handleExpandChange(row, expandedRows){}// 处理展开/折叠事件
}
};
</script>

<style scoped lang="scss">
.hidden{display:none;}
</style>
登录后复制
在这个案例里，首先初始化了一部分模拟数据，并且根据特定逻辑给这些数据分配不同的分组标签 (group) 来表示它们之间是否存在关联关系；接着，在获取到完整的数据集之后调用了 getMergeCells() 方法用于分析整个集合中有哪些条目应当被视作一组来进行垂直方向上的合并；最后借助于 setCellClassName 函数动态调整 CSS 类从而隐藏不需要显示出来的重复内容。