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>
