el-table表格合并

1、实现效果

2、代码实现

<el-table
        :data="basePerformanceInfoTable"
        border
        style="width: 100%"
        :span-method="objectSpanMethod"
      >
        <el-table-column
          prop="variety"
          label="品种"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="shape"
          label="形状"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="deliveryState"
          label="交货状态"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="specification"
          label="规格"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="详情"
          class="remarkInfo"
        >
          <template slot-scope="{row}">
            <ul class="remarkTableInfo clearfix">
              <li :title="row.performanceKey">{{ row.performanceKey }}</li>
              <li :title="row.performanceValue">{{ row.performanceValue }}</li>
              <li :title="row.remarkTitle">{{ row.remarkTitle }}</li>
              <li :title="row.remark">{{ row.remark }}</li>
            </ul>
          </template>
        </el-table-column>
      </el-table>

// 材料搜索详情
export const MainInfo = {
    data() {
        return {
            previousItem: null, // 循环的上一个元素
            spanArr: [], //用于存放每一行记录的合并数
            pos: 0, // spanArr的索引
            basePerformanceInfoTable: [
                // 基本力学性能table数据
                {
                    variety: "06Ni9DR-板(5~30)",
                    shape: "板",
                    deliveryState: "淬火+回火",
                    specification: "5~30",
                    performanceKey: "ReL(MPa)",
                    performanceValue: "≥560",
                    remarkTitle: "说明",
                    remark: "屈服不明显时，采用Rp0.2",
                },
                {
                    variety: "06Ni9DR-板(5~30)",
                    shape: "板",
                    deliveryState: "淬火+回火",
                    specification: "5~30",
                    performanceKey: "Rm(MPa)",
                    performanceValue: "680~820",
                    remarkTitle: "说明",
                    remark: "",
                },
                {
                    variety: "06Ni9DR-板(5~30)",
                    shape: "板",
                    deliveryState: "淬火+回火",
                    specification: "5~30",
                    performanceKey: "A(%)",
                    performanceValue: "≥18",
                    remarkTitle: "说明",
                    remark: "",
                },
                {
                    variety: "06Ni9DR-板(>30~50)",
                    shape: "板",
                    deliveryState: "淬火+回火",
                    specification: ">30~50",
                    performanceKey: "ReL(MPa)",
                    performanceValue: "≥550",
                    remarkTitle: "说明",
                    remark: "屈服不明显时，采用Rp0.2",
                },
                {
                    variety: "06Ni9DR-板(>30~50)",
                    shape: "板",
                    deliveryState: "淬火+回火",
                    specification: "5~30",
                    performanceKey: "Rm(MPa)",
                    performanceValue: "680~820",
                    remarkTitle: "说明",
                    remark: "",
                },
            ],
        };
    },
    methods: {
        // 合并数组
        getSpanArr(data) {
            data.forEach((item, index) => {
                if (index === 0) {
                    this.spanArr.push(1);
                    this.pos = 0;
                } else {
                    // 判断当前元素是否与上一个元素相同,根据合并字段匹配
                    if (item.variety == this.previousItem.variety) {
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.pos = index;
                    }
                }
                this.previousItem = item;
            });
        },
        // 表格合并方法
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex !== 4) {
                let _row = this.spanArr[rowIndex];
                let _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col,
                };
            }
        },

    },
    created() {
        this.getSpanArr(this.basePerformanceInfoTable);
    }

}