element中table表单合并封装

 先看效果

 代码如下:有备注

<template>
    <div style="margin: 10px">
        <!-- 合并列组件 -->
        <h2>合并列组件</h2>
        <table2
            :tableList="tableList"
            :tableData="tableData"
            merge
            :amendTableData="amendTableData"
            sortIndex="qymc"
            :config="{ columnIndex: [1, 2] }"
            :slotShow="{
                show: true,
                index: [4, 5, 6]
            }"
        >
            <!-- <template v-slot="{ cellIndex, row }">
                <el-button @click="showDetail(scope)">{{
                    row[Object.keys(row)[cellIndex - 1]]
                }}</el-button>
            </template> -->
            <el-table-column>
                <template v-slot="{ cellIndex, row }">
                    <el-button @click="showDetail(scope)">{{
                        row[Object.keys(row)[cellIndex - 1]]
                    }}</el-button>
                </template>
            </el-table-column>
        </table2>
    </div>
</template>
<script setup>
import table2 from '@/components/liuxiongfei/table/index.vue';
function showDetail(val, row) {
    console.log(val, row, 'xxxxxxxxx');
}
// 序号修改函数
function amendTableData(Nosort, i) {
    tableData[i].index = Nosort;
}
const tableList = [
    { prop: 'index', label: '序号' }, //序号合并传prop=index
    { prop: 'xzqh', label: '行政区划' },
    { prop: 'qymc', label: '企业名称' },
    { prop: 'pkmc', label: '排口名称' },
    { prop: 'bjlx', label: '报警类型' },
    { prop: 'hjbjcs', label: '合计报警次数' },
    { prop: 'bjyz', label: '报警因子' },
    { prop: 'cz', label: '操作' }
];
const tableData = [
    {
        xzqh: '元和街道',
        qymc: '江苏奥达服饰有限公司',
        pkmc: '废水0#排口',
        bjlx: '水环境-日数据超标',
        hjbjcs: '0',
        bjyz: 'co0'
    },
    {
        xzqh: '元和街道',
        qymc: '江苏奥达服饰有限公司',
        pkmc: '废水1#排口1',
        bjlx: '水环境-日数据超标1',
        hjbjcs: '1',
        bjyz: 'co1'
    },
    {
        xzqh: '元和街道',
        qymc: '江苏奥达服饰有限公司2',
        pkmc: '废水2#排口2',
        bjlx: '水环境-日数据超标2',
        hjbjcs: '2',
        bjyz: 'co2'
    },
    {
        xzqh: '元和街道3',
        qymc: '江苏奥达服饰有限公司3',
        pkmc: '废水3#排口3',
        bjlx: '水环境-日数据超标3',
        hjbjcs: '3',
        bjyz: 'co3'
    },
    {
        xzqh: '元和街道3',
        qymc: '江苏奥达服饰有限公司4',
        pkmc: '废水4#排口4',
        bjlx: '水环境-日数据超标4',
        hjbjcs: '4',
        bjyz: 'co4'
    },
    {
        xzqh: '元和街道5',
        qymc: '江苏奥达服饰有限公司5',
        pkmc: '废水5#排口5',
        bjlx: '水环境-日数据超标5',
        hjbjcs: '5',
        bjyz: 'co5'
    },
    {
        xzqh: '元和街道6',
        qymc: '江苏奥达服饰有限公司6',
        pkmc: '废水6#排口6',
        bjlx: '水环境-日数据超标6',
        hjbjcs: '6',
        bjyz: 'co6'
    },
    {
        xzqh: '元和街道7',
        qymc: '江苏奥达服饰有限公司7',
        pkmc: '废水7#排口7',
        bjlx: '水环境-日数据超标7',
        hjbjcs: '7',
        bjyz: 'co7'
    },
    {
        xzqh: '元和街道8',
        qymc: '江苏奥达服饰有限公司8',
        pkmc: '废水8#排口8',
        bjlx: '水环境-日数据超标8',
        hjbjcs: '8',
        bjyz: 'co8'
    },
    {
        xzqh: '元和街道9',
        qymc: '江苏奥达服饰有限公司9',
        pkmc: '废水9#排口9',
        bjlx: '水环境-日数据超标9',
        hjbjcs: '9',
        bjyz: 'co9'
    },
    {
        xzqh: '元和街道10',
        qymc: '江苏奥达服饰有限公司10',
        pkmc: '废水10#排口10',
        bjlx: '水环境-日数据超标10',
        hjbjcs: '9',
        bjyz: 'co10'
    }
];
</script>
<style scoped></style>