1、el-table中添加事件 :span-method="genderSpanCity"
<el-table :span-method="genderSpanCity":data="data.tableData":fit="true" table-layout="fixed" header-align="center" stripestyle="width:100%;height: 96%;":cell-style="{borderColor:'#aaa'}":header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9',height:'50px'}"v-else><el-table-column :label="$t('wms.dailyProduct')" align="center" height="70px"><el-table-column><el-table-column prop="process" :label="$t('mes.workingProcedure')" width="100" align="center"/><el-table-column prop="item" width="130"/><el-table-column prop="item2" width="150"/></el-table-column><!--二级标题日期--><el-table-column v-for="(name,index) in data.title" :key="name" :label="name" align="center"><!-- 三级标题--><el-table-column v-for="column in data.tableColumns" :key="column.prop":prop="column.prop":label="column.label" align="center"><template #default="scope">{{ scope.row.custom.length > 0 ? scope.row.custom[index][column.prop] : scope.row.custom[column.prop] }}</template></el-table-column></el-table-column></el-table-column></el-table>
2、js添加函数
// 合并列
const genderSpanCity = ({row,column,rowIndex,columnIndex
}) => {// 合并前4行的2列与3列for (let i = 0; i < 13; i++) {if (columnIndex === 1 && rowIndex === i) {return {rowspan: 1,colspan: 2}} else if (columnIndex === 2 && rowIndex === i) {return {rowspan: 0,colspan: 0}}}// 合并第4行以后的数据for (let i = 4; i < data.tableData.length; i++) {if (columnIndex > 3 && columnIndex % 2 === 0 && rowIndex === i) {return [1, 3]} else if (columnIndex >= 3 && columnIndex % 2 === 1 && rowIndex === i) {return [0, 0]}}// 合并前两列的数据if (columnIndex === 0 || columnIndex === 1) {// 获取当前单元格的值const currentValue = row[column.property]// 获取上一行相同列的值const preRow = data.tableData[rowIndex - 1]const preValue = preRow ? preRow[column.property] : null// 如果当前值和上一行的值相同，则将当前单元格隐藏if (currentValue === preValue) {return {rowspan: 0,colspan: 0}} else {// 否则计算当前单元格应该跨越多少行let rowspan = 1for (let i = rowIndex + 1; i < data.tableData.length; i++) {const nextRow = data.tableData[i]const nextValue = nextRow[column.property]if (nextValue === currentValue) {rowspan++} else {break}}return {rowspan,colspan: 1}}}
}
效果图为
3、数据格式参考：
const data = reactive({// tableData: [// {// process: '混料',// item: '11CAAF02/碳酸钙',// item2: '11CAAF02/碳酸钙',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '混料',// item: '11PVAF03/5型树脂',// item2: '11PVAF03/5型树脂',// custom: '{"本周/This Week": 1 }'// }, {// process: '混料',// item: '11PVAF04/7型树脂',// item2: '11PVAF04/7型树脂',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '混料',// item: '4330AF01/回料',// item2: '4330AF01/回料',// custom: '{"本周/This Week": 1 }'// },// {// process: '挤出',// item: '产出总托数',// item2: '产出总托数',// custom: '{"本周/This Week": 1 }'// }, {// process: '挤出',// item: 'RGV调度次数',// item2: 'RGV调度次数',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '挤出',// item: 'ng板数量',// item2: 'ng板数量',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '挤出',// item: '养生区ng板数量',// item2: '养生区ng板数量',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// },// {// process: '',// item: '',// item2: '',// custom: ''// }, {// process: '贴合',// item: '发泡板',// item2: '投料记录',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '贴合',// item: '发泡板',// item2: 'RGV调度次数',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '贴合',// item: '上基材',// item2: '投料记录',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '贴合',// item: '上基材',// item2: '上料扫码次数',// custom: '{"本周/This Week": 1}'// }, {// process: '贴合',// item: '码垛',// item2: '产出记录',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '贴合',// item: '码垛',// item2: 'RGV调度次数',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '贴合',// item: '汇总数量',// item2: '发泡板',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '贴合',// item: '汇总数量',// item2: '上基材',// custom: '{"本周/This Week": 1}'// },// {// process: '',// item: '',// item2: '',// custom: ''// }, {// process: '锯开检',// item: '贴合大张',// item2: '投料记录',// custom: '{"本周/This Week": 1}'// }, {// process: '锯开检',// item: '贴合大张',// item2: 'RGV调度次数',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '锯开检',// item: 'CCD',// item2: '前光电1计数',// custom: '{"本周/This Week": 1}'// }, {// process: '锯开检',// item: 'CCD',// item2: '前光电2计数',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '锯开检',// item: 'CCD',// item2: '后光电计数',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '锯开检',// item: '汇总数量',// item2: '贴合大张',// custom: '{"本周/This Week": 1}'// }, {// process: '锯开检',// item: '汇总数量',// item2: 'CCD产出',// custom: '{"本周/This Week": 1}'// },// {// process: '',// item: '',// item2: '',// custom: ''// }, {// process: 'PE',// item: '汇总数量',// item2: '投入',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: 'PE',// item: '汇总数量',// item2: '产出',// months: '9月1日',// custom: '{"本周/This Week": 1 }'// },// {// process: '',// item: '',// item2: '',// custom: ''// }, {// process: '打包',// item: '汇总数量',// item2: '投入',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '打包',// item: '汇总数量',// item2: '产出',// custom: '{"本周/This Week": 1 }'// }// ], // 表头数据tableColumns: [],propArr: [],title: [],tableData: []
})
