要实现的效果:
代码实现:
设置一下表格的:header-cell-style="rowClass"
<el-table
:data="tableDataDetail"
style="width: 100%"
height="100%"
:header-cell-style="rowClass"
>
<el-table-column label="考核内容" align="center">
<el-table-column prop="type" label="" width="100" align="center">
</el-table-column>
<el-table-column prop="name" label="" align="center">
</el-table-column>
</el-table-column>
</el-table>
methods:{
rowClass({ row, column,rowIndex,columnIndex}) {
console.log(row,column,rowIndex,columnIndex);
if(rowIndex===0 && columnIndex===0) {
this.$nextTick(()=> {
if(document.getElementsByClassName(column.id).length!==0) {
document.getElementsByClassName(column.id)[0].setAttribute('rowSpan',2);
return false
}
})
}
if(rowIndex===1 && (columnIndex===0 || columnIndex===1)) {
return {display:'none'}
}
},
}
借鉴文章:elementui 表头合并,两列共用一个表头,header-cell-style设置表头样式_el-table两列公用一个title-CSDN博客
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 关于在vue2中实现el-table的表头合并
发表评论 取消回复