vue2使用el-table合并单元格，包括合并行、合并列
<el-table:header-cell-style="handerMethod":span-method="arraySpanMethod"@cell-click="handleCellClick":data="tableData"style="width: 100%"><el-table-column label="工序编码"><el-table-column label="工序"><el-table-columnprop="type"label="类型"width="80"></el-table-column><el-table-columnprop="pipelineCode"label="流水码"width="100"></el-table-column><el-table-columnprop="profession"label="名称"width="80"></el-table-column><el-table-columnprop="accessory"label=""width="100"></el-table-column><el-table-columnprop="specification"label="规格（基础信息）"width="120"></el-table-column><el-table-columnprop="unit"label="单位"width="60"></el-table-column></el-table-column></el-table-column><el-table-columnv-for="(item,index) in titleList":key="index":label="item.processCode"><el-table-column:key="index":label="item.process"><el-table-column:key="index"label="消耗量"><template slot-scope="scope">{{ item.consume[scope.$index] }}</template></el-table-column></el-table-column></el-table-column></el-table><script>export default {name: 'viewBOM',data() {return {tableData: [{type: '材料',pipelineCode: '111',profession: '主料',accessory: '辅料',specification: '10mm',unit: '平方'}, {type: '材料',pipelineCode: '444',profession: '专辅',accessory: '辅料',specification: 'M50',unit: '个'}, {type: '材料',pipelineCode: '555',profession: '辅料',accessory: '辅料',specification: 'M30',unit: '个'}, {type: '材料',pipelineCode: '666',profession: '主料',accessory: '辅料',specification: '8mm',unit: '平方'}, {type: '人工',pipelineCode: '777',profession: '装配工',accessory: '',specification: '',unit: '工日'}, {type: '人工',pipelineCode: '888',profession: '装配工',accessory: '',specification: '',unit: '工日'}, {type: '人工',pipelineCode: '999',profession: '装配工',accessory: '',specification: '',unit: '工日'}],titleList: [{processCode: '111',process: '装配工1',consume: ['0.92(配比)', '1(1.2)', '2(1.2)', '3(1.2)', '-', '-', '6(1.2)']},{processCode: '222',process: '主料1',consume: [11, 21, 31, 41, 51, 61, 71]}]}},methods: {goBack() {this.$router.go(-1)},handleNodeClicked(data) {console.log('从子组件接收到的数据:', data)},//合并单位表头handerMethod({ row, column, rowIndex, columnIndex }) {// 合并第三列和第四列if (row[0].level == 3) {row[2].colSpan = 2 // 第三列合并两列row[3].colSpan = 0 // 第四列不显示if (columnIndex === 3) {return { display: 'none' } // 隐藏第四列}// 合并第七列及后面的列的表头let startColIndex = 6 // 假设第七列的索引是6let colSpan = this.titleList.lengthfor (let i = startColIndex; i < startColIndex + colSpan; i++) {if (i === startColIndex) {row[i].colSpan = colSpan // 第七列合并多列} else {row[i].colSpan = 0 // 其他列不显示if (columnIndex === i) {return { display: 'none' } // 隐藏这些列}}}}return {}},// 合并单元格arraySpanMethod({ row, column, rowIndex, columnIndex }) {// 合并第一列（type）if (columnIndex === 0) {// 检查当前行是否是该类型的第一行if (rowIndex === 0 || this.tableData[rowIndex - 1].type !== row.type) {let rowspan = 1// 计算当前类型的连续行数for (let i = rowIndex + 1; i < this.tableData.length; i++) {if (this.tableData[i].type === row.type) {rowspan++} else {break}}return {rowspan: rowspan,colspan: 1}} else {// 如果不是第一行，则隐藏该单元格return {rowspan: 0,colspan: 0}}}// 合并 type 为 '人工' 的行的第三列和第四列if (row.type === '人工') {if (columnIndex === 2) {return {rowspan: 1,colspan: 2}} else if (columnIndex === 3) {return {rowspan: 0,colspan: 0}}}// 默认返回值return {rowspan: 1,colspan: 1}},handleCellClick(row, column, cell, event) {console.log('点击的行数据:', row)console.log('点击的列数据:', column)console.log('点击的单元格元素:', cell)console.log('事件对象:', event)// 在这里添加你需要的逻辑}}
}
</script><style scoped lang="scss">/deep/ .el-table__header th {text-align: center;
}
</style>
