ant-design table合并

1.两列合并，三列合并

 <a-table :columns="productColumns" :data-source="productData" bordered size="small" :pagination="false">
                                    <template #bodyCell="{ column, text, record }">
                                        <template v-if="column.dataIndex === 'avgPrice'">
                                            <div class="editable-cell-input-wrapper">
                                                <a-input-number placeholder="价格中间值" :min="0" v-model:value="record.avgPrice" />
                                            </div>
                                        </template>
                                        <template v-if="column.dataIndex === 'minPrice'">
                                            <div class="editable-cell-input-wrapper">
                                                <div>
                                                    <a-input-number v-model:value="record.minPrice" :min="0" placeholder="最小价格"
                                                        style="width: 100px;" />
                                                    <span class="mr-5 ml-5">-</span>
                                                    <a-input-number v-model:value="record.maxPrice" :min="record.minPrice"
                                                        placeholder="最大价格" style="width: 100px" />
                                                </div>
                                            </div>
                                        </template>
                                        <template v-if="column.dataIndex === 'checked'">
                                            <div class="editable-cell">
                                                <div class="editable-cell-input-wrapper">
                                                    <a-checkbox v-model:checked="record.checked"></a-checkbox>
                                                </div>
                                            </div>
                                        </template>
                                    </template>
                                </a-table>
                                <a-table :columns="productColumns2" :data-source="productData2" bordered size="small" :pagination="false"
                                    class="mt-4">
                                    <template #bodyCell="{ column, text, record }">
                                        <template v-if="column.dataIndex === 'avgPrice'">
                                            <div class="editable-cell-input-wrapper">
                                                <a-input-number placeholder="价格中间值" :min="0" v-model:value="record.avgPrice" />
                                            </div>
                                        </template>
                                        <template v-if="column.dataIndex === 'minPrice'">
                                            <div class="editable-cell-input-wrapper">
                                                <div>
                                                    <a-input-number v-model:value="record.minPrice" :min="0" placeholder="最小价格"
                                                        style="width: 100px;" />
                                                    <span class="mr-5 ml-5">-</span>
                                                    <a-input-number v-model:value="record.maxPrice" :min="record.minPrice"
                                                        placeholder="最大价格" style="width: 100px" />
                                                </div>
                                            </div>
                                        </template>
                                        <template v-if="column.dataIndex === 'checked'">
                                            <div class="editable-cell">
                                                <div class="editable-cell-input-wrapper">
                                                    <a-checkbox v-model:checked="record.checked"></a-checkbox>
                                                </div>
                                            </div>
                                        </template>
                                    </template>
                                </a-table>

productColumns: [
                {
                    title: '大类',
                    dataIndex: 'typeDesc',
                },
                {
                    title: '明细',
                    dataIndex: 'childTypeDesc',
                },
                // {
                //     title: '价格中间值(¥/m)',
                //     dataIndex: 'avgPrice',
                // },
                // {
                //     title: '价格区间(¥/m)',
                //     dataIndex: 'minPrice',
                // },
                {
                    title: '是否选中',
                    dataIndex: 'checked',
                    width: 100
                }
            ],
            productColumns2: [
                {
                    title: '大类',
                    dataIndex: 'type1',
                },
                {
                    title: '子类',
                    dataIndex: 'type2',
                },
                {
                    title: '明细',
                    dataIndex: 'typeDesc',
                },
                // {
                //     title: '价格中间值(¥/m)',
                //     dataIndex: 'avgPrice',
                // },
                // {
                //     title: '价格区间(¥/m)',
                //     dataIndex: 'minPrice',
                // },
                {
                    title: '是否选中',
                    dataIndex: 'checked',
                    width: 100
                }
            ],
            productData: [],
            productData2: [],

const { level2, level3 } = res;
                let productData = [], productData2 = [];
                _.forEach(level2, item => {
                    if (_.isEmpty(item.children)) {
                        productData.push(initProduct(item, item, 1));
                    } else {
                        productData.push(..._.map(item.children, (child, index) => {
                            const rowSpan = index === 0 ? _.size(item.children) : 0;
                            return initProduct(child, item, rowSpan);
                        }));
                    }
                });
                // _.set(this.productColumns[0], 'customCell', (_, index) => {
                //     return { rowSpan: _.rowSpan };
                // });
                _.forEach(level3, item1 => {
                    if (item1.children) {
                        _.forEach(item1.children, item2 => {
                            if (item2.children) {
                                _.forEach(item2.children, item3 => {
                                    item3.type1 = item1.typeDesc;
                                    item3.type2 = item2.typeDesc;
                                    productData2.push(item3);
                                });
                            } else {
                                // dictList.push(item2);
                            }
                        });
                    } else {
                        // dictList.push(item1);
                    }
                });
                this.productData = productData;
                this.productData2 = this._transformData(productData2);

                // _.set(this.productColumns2[0], 'customCell', (_, index) => {
                //   return { rowSpan: _.rowSpan };
                // });
                // _.set(this.productColumns2[1], 'customCell', (_, index) => {
                //   return { rowSpan: _.rowSpanSub };
                // });

_transformData(data) {
            const type1Counts = new Map();
            data.forEach(item => {
                type1Counts.set(item.type1, (type1Counts.get(item.type1) || 0) + 1);
            });
            const transformedData = [];
            let currentType1;
            data.forEach(item => {
                if (currentType1 !== item.type1) {
                    currentType1 = item.type1;
                }

                const rowSpan = currentType1 === item.type1 && !transformedData.some(t => t.type1 === item.type1) ? type1Counts.get(item.type1) : 0;
                const rowSpanSub = currentType1 === item.type1 && !transformedData.some(t => t.type1 === item.type1 && t.type2 === item.type2) ?
                    data.filter(i => i.type1 === item.type1 && i.type2 === item.type2).length : 0;
                transformedData.push({
                    ...item,
                    rowSpan,
                    rowSpanSub
                });
            });

            _.forEach(data, item => {
                item.rowSpan = _.find(transformedData, i => i.id === item.id).rowSpan;
                item.rowSpanSub = _.find(transformedData, i => i.id === item.id).rowSpanSub;
            });
            return data;
        },

_updateItemIfFound(data, item) {
            const matchingItem = _.find(data, ({ productTypeCategoryCode }) => productTypeCategoryCode === item.id);
            if (matchingItem) {
                _.assign(matchingItem, {
                    checked: true,
                    avgPrice: item.avgPrice,
                    maxPrice: item.maxPrice,
                    minPrice: item.minPrice,
                });
            }
        },
checkedProduct() {
            this.checkedKeys = _.map(this.supplierProductTypeCategoryVos, 'productTypeCategoryCode');
            // _.forEach(this.supplierProductTypeCategoryVos, item => {
            //     this._updateItemIfFound(this.productData, item);
            //     this._updateItemIfFound(this.productData2, item);
            // });
        },