大佬教程收集整理的这篇文章主要介绍了el-table合并表头，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
将表头合并为一行
<template>
<div>
<el-table
:data="tableData"
border
:header-cell-class-name="headerClass"
style="width: 100%">
<el-table-column label="2017" align="center">
<el-table-column
prop="id"
width="180">
</el-table-column>
<el-table-column
prop="name">
</el-table-column>
<el-table-column
prop="amount1">
</el-table-column>
<el-table-column
prop="amount2">
</el-table-column>
<el-table-column
prop="amount3">
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
methods: {
headerClass(row) {
debugger
if (row.rowIndex === 1) {
return 'header-row-display';
}
}
}
};
</script>
<style lang="scss" scoped>
/deep/ .header-row-display {
display: none;
}
</style>
以上是大佬教程为你收集整理的el-table合并表头全部内容，希望文章能够帮你解决el-table合并表头所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。