自定義vue組件：
使用 Element UI 的<el-table>組件冕末，并根據(jù)設備組字段：device_group_desc，進行合并表格中的行：
1侣颂、動態(tài)生成列定義：根據(jù)數(shù)據(jù)動態(tài)生成列定義档桃。
2、合并行：根據(jù)相同的設備組字段：device_group_desc憔晒，來實現(xiàn)行合并藻肄。
效果如下：
<template>? ? <div style="overflow: auto">? ? ? ? {{dataChart.value}}? ? ? ? <el-table :data="filteredTableData" border class="custom-table" :span-method="spanMethod">? ? ? ? ? ? <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label"? ? ? ? ? ? ? ? :align="column.align" />? ? ? ? </el-table>? ? </div></template><script>? ? export default {? ? ? ? data() {? ? ? ? ? ? return {? ? ? ? ? ? ? ? // 原始數(shù)據(jù)? ? ? ? ? ? ? ? rawData: [? ? ? ? ? ? ? ? ? ? { device_group_desc: "1#達克羅線", batch_code: "2471-2", afqty: "3630/3775", product_spec: "M36*450", product_date: "2024-10-06", aaa: 123, work_shift: "機甲班組" },? ? ? ? ? ? ? ? ? ? { device_group_desc: "1#達克羅線", batch_code: "249143-2", afqty: "520/525", product_spec: "M56*760", product_date: "2024-09-27", work_shift: "機甲班組" },? ? ? ? ? ? ? ? ? ? { device_group_desc: "1#達克羅線", batch_code: "249325-2", afqty: "796/805", product_spec: "M52*470", product_date: "2024-09-27", work_shift: "機甲班組" },? ? ? ? ? ? ? ? ? ? { device_group_desc: "鋸床-1", batch_code: "246410-1", afqty: "670/690", product_spec: "Φ124*Φ66*100", product_date: "2024-10-16", work_shift: "機甲班組" },? ? ? ? ? ? ? ? ? ? { device_group_desc: "鋸床-2", batch_code: "246410-1", afqty: "670/690", product_spec: "Φ124*Φ66*100", product_date: "2024-10-16", aaa: 345, work_shift: "質(zhì)檢班組" }? ? ? ? ? ? ? ? ],? ? ? ? ? ? ? ? filteredTableData: [],? ? ? ? ? ? ? ? columns: [],? ? ? ? ? ? ? ? rowSpanObj: {},? ? ? ? ? ? };? ? ? ? },? ? ? ? computed: {? ? ? ? ? ? // 動態(tài)生成列定義? ? ? ? ? ? dynamicColumns() {? ? ? ? ? ? ? ? const keys = Object.keys(this.filteredTableData[0]);? ? ? ? ? ? ? ? return keys? ? ? ? ? ? ? ? ? ? .filter((key) => key !== "work_shift")? ? ? ? ? ? ? ? ? ? .map((key, index) => {? ? ? ? ? ? ? ? ? ? ? ? let str;? ? ? ? ? ? ? ? ? ? ? ? if (key === 'device_group_desc') {? ? ? ? ? ? ? ? ? ? ? ? ? ? str = "設備組"? ? ? ? ? ? ? ? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? ? ? ? ? str = `生產(chǎn)批次${index}`? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? return {? ? ? ? ? ? ? ? ? ? ? ? ? ? label: str, // 動態(tài)生成列名? ? ? ? ? ? ? ? ? ? ? ? ? ? prop: key,? ? ? ? ? ? ? ? ? ? ? ? ? ? width: "180",? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? });? ? ? ? ? ? },? ? ? ? },? ? ? ? methods: {? ? ? ? ? ? initData() {? ? ? ? ? ? ? ? const { rawData, rowSpanObj } = this;? ? ? ? ? ? ? ? // 篩選班組? ? ? ? ? ? ? ? const filteredData = rawData.filter(? ? ? ? ? ? ? ? ? ? (item) => item.work_shift === "機甲班組"? ? ? ? ? ? ? ? );? ? ? ? ? ? ? ? // 初始化列定義? ? ? ? ? ? ? ? this.columns = this.dynamicColumns;? ? ? ? ? ? },? ? ? ? ? ? // 合并方法? ? ? ? ? ? spanMethod({ row, column, rowIndex, columnIndex }) {? ? ? ? ? ? ? ? if (columnIndex === 0) { // 只合并第一列? ? ? ? ? ? ? ? ? ? if (rowIndex > 0 && row.device_group_desc === this.filteredTableData[rowIndex - 1].device_group_desc) {? ? ? ? ? ? ? ? ? ? ? ? // 如果當前行和前一行的 device_group_desc 相同，則合并? ? ? ? ? ? ? ? ? ? ? ? return {? ? ? ? ? ? ? ? ? ? ? ? ? ? rowspan: 0,? ? ? ? ? ? ? ? ? ? ? ? ? ? colspan: 1? ? ? ? ? ? ? ? ? ? ? ? };? ? ? ? ? ? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? ? ? // 否則拒担，計算 rowspan? ? ? ? ? ? ? ? ? ? ? ? let rowspan = 1;? ? ? ? ? ? ? ? ? ? ? ? for (let i = rowIndex + 1; i < this.filteredTableData.length; i++) {? ? ? ? ? ? ? ? ? ? ? ? ? ? if (row.device_group_desc === this.filteredTableData[i].device_group_desc) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? rowspan++;? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? return {? ? ? ? ? ? ? ? ? ? ? ? ? ? rowspan: rowspan,? ? ? ? ? ? ? ? ? ? ? ? ? ? colspan: 1? ? ? ? ? ? ? ? ? ? ? ? };? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? return {? ? ? ? ? ? ? ? ? ? rowspan: 1,? ? ? ? ? ? ? ? ? ? colspan: 1? ? ? ? ? ? ? ? };? ? ? ? ? ? },? ? ? ? },? ? ? ? mounted() {? ? ? ? ? ? this.filteredTableData = this.rawData;? ? ? ? ? ? this.initData();? ? ? ? },? ? };</script><style scoped>? ? .el-table__cell {? ? ? ? color: #4484dc;? ? ? ? background-color: #142c44;? ? }? ? .custom-table .el-table__header th {? ? ? ? text-align: center;? ? ? ? background-color: #142c44;? ? ? ? /* 設置表頭字體大小 */? ? ? ? font-size: 16px;? ? }? ? .el-table__empty-block {? ? ? ? height: 100%;? ? ? ? background-color: #142c44;? ? }</style>
