vue3+ant ui(tabale)合并表/列

 table组件

<a-table :columns="columns" :data-source="data" :pagination="false" :scroll="scroll" bordered :rowKey="(record, key) => {

                    return key;

                }">

                    <template #zhibiao="{ record, index }">

                        <p v-for="(item, index) in record.zhibiao" :key="index">

                            {{ item.zhibiaoname }}

                        </p>

                    </template>

                    <template #fenzhi="{ record, index }">

                        <p v-for="(item, index) in record.fenzhi" :key="index">

                            {{ item.fenzhinumber }}

                        </p>

                    </template>

                    <template #quanzhong="{ record, index }">

                        <p v-for="(item, index) in record.quanzhong" :key="index">

                            {{ item.quanzhongnumber }}

                        </p>

                    </template>

                    <template #zice="{ record, index }">

                        <p v-for="(item, index) in record.zice" :key="index">

                            {{ item.zicenumber }}

                        </p>

                    </template>

                    <template #fuce="{ record, index }">

                        <p v-for="(item, index) in record.fuce" :key="index">

                            {{ item.fucenumber }}

                        </p>

                    </template>

                    <template #zuizhong="{ record, index }">

                        <p v-for="(item, index) in record.zuizhong" :key="index">

                            {{ item.zuizhongnumber }}

                        </p>

                    </template>

                    <template #renwu="{ record }">

                        <a>

                            <span @click="download(record)" style="color: rgb(64, 169, 255)">

                                查看</span>

                        </a>                      

                    </template>

                    <template #kaiguan="{ record }">

                        <a v-if="record.switch == 0">

                            <span @click="download(record)" style="color: rgb(64, 169, 255)">

                                开启</span>

                        </a>

                        <a v-else>

                            <span @click="download(record)" style="color: rgb(64, 169, 255)">

                                关闭</span>

                        </a>                        

                    </template>

                    <template #zhuangtai="{ record }">

                        <p v-if="record.state == 0">

                            <span>已结束</span>

                        </p>

                        <p v-if="record.state == 1">

                            <span>待自评</span>

                        </p>

                        <p v-if="record.state == 2">

                            <span>待复评</span>

                        </p>                        

                    </template>

                    <template #caozuo="{ record }">

                        <a>

                            <span @click="download(record)" style="color: rgb(64, 169, 255)">

                                预览</span>

                        </a>

                        <a>

                            <span @click="download(record)" style="color: rgb(64, 169, 255)">

                                发布</span>

                        </a>

                        <a>

                            <span @click="download(record)" style="color: rgb(64, 169, 255)">

                                自评</span>

                        </a>

                        <a>

                            <span @click="download(record)" style="color: rgb(64, 169, 255)">

                                复评</span>

                        </a>    

                    </template>

                </a-table>

参数设置

//测试数据

const data = ref([

    {

        key: '1',

        index: '1',

        year: '2022',

        name: '网格一--张晓1',

        zhibiao: [

            { zhibiaoname: '目标责任考核' },

            { zhibiaoname: "工作考核" },

            { zhibiaoname: "影响度考核" },

        ],

        fenzhi: [

            { fenzhinumber: '51' },

            { fenzhinumber: '52' },

            { fenzhinumber: '53' },

        ],

        quanzhong: [

            { quanzhongnumber: '51%' },

            { quanzhongnumber: '52%' },

            { quanzhongnumber: '53%' },

        ],

        zice: [

            { zicenumber: '51' },

            { zicenumber: '52' },

            { zicenumber: '53' },

        ],

        fuce: [

            { fucenumber: '51' },

            { fucenumber: '52' },

            { fucenumber: '53' },

        ],

        zuizhong: [

            { zuizhongnumber: '51' },

            { zuizhongnumber: '52' },

            { zuizhongnumber: '53' },

        ],

        zonghe: '71',

        switch: 0,

        state:0,

    },

    {

        key: '1',

        index: '2',

        year: '2022',

        name: '网格一--张晓1',

        zhibiao: [

            { zhibiaoname: '目标责任考核' },

            { zhibiaoname: "工作考核" },

            { zhibiaoname: "影响度考核" },

        ],

        fenzhi: [

            { fenzhinumber: '51' },

            { fenzhinumber: '52' },

            { fenzhinumber: '53' },

        ],

        quanzhong: [

            { quanzhongnumber: '51%' },

            { quanzhongnumber: '52%' },

            { quanzhongnumber: '53%' },

        ],

        zice: [

            { zicenumber: '51' },

            { zicenumber: '52' },

            { zicenumber: '53' },

        ],

        fuce: [

            { fucenumber: '51' },

            { fucenumber: '52' },

            { fucenumber: '53' },

        ],

        zuizhong: [

            { zuizhongnumber: '51' },

            { zuizhongnumber: '52' },

            { zuizhongnumber: '53' },

        ],

        zonghe: '71',

        switch: 0,

        state:0,

    },

    {

        key: '1',

        index: '3',

        year: '2022',

        name: '网格一--张晓1',

        zhibiao: [

            { zhibiaoname: '目标责任考核' },

            { zhibiaoname: "工作考核" },

            { zhibiaoname: "影响度考核" },

        ],

        fenzhi: [

            { fenzhinumber: '51' },

            { fenzhinumber: '52' },

            { fenzhinumber: '53' },

        ],

        quanzhong: [

            { quanzhongnumber: '51%' },

            { quanzhongnumber: '52%' },

            { quanzhongnumber: '53%' },

        ],

        zice: [

            { zicenumber: '51' },

            { zicenumber: '52' },

            { zicenumber: '53' },

        ],

        fuce: [

            { fucenumber: '51' },

            { fucenumber: '52' },

            { fucenumber: '53' },

        ],

        zuizhong: [

            { zuizhongnumber: '51' },

            { zuizhongnumber: '52' },

            { zuizhongnumber: '53' },

        ],

        zonghe: '71',

        switch: 0,

        state:0,

    },

]);

//测试表头

const columns = ref([

    {

        title: '序号',

        dataIndex: 'index',

        align: "center",

        ellipsis: true,

    },

    {

        title: '考核年度',

        dataIndex: 'year',

        align: "center",

        ellipsis: true,

    },

    {

        title: '考核对象',

        dataIndex: 'name',

        align: "center",

    },

    {

        title: '考核指标',

        dataIndex: 'zhibiao',

        align: "center",

        ellipsis: true,

        slots: {

            customRender: "zhibiao",

        },

    },

    {

        title: '分值',

        dataIndex: 'fenzhi',

        align: "center",

        ellipsis: true,

        slots: {

            customRender: "fenzhi",

        },

    },

    {

        title: '权重',

        dataIndex: 'quanzhong',

        align: "center",

        ellipsis: true,

        slots: {

            customRender: "quanzhong",

        },

    },

    {

        title: '自评得分',

        dataIndex: 'zice',

        align: "center",

        ellipsis: true,

        slots: {

            customRender: "zice",

        },

    },

    {

        title: '复评得分',

        dataIndex: 'fuce',

        align: "center",

        ellipsis: true,

        slots: {

            customRender: "fuce",

        },

    },

    {

        title: '最终得分',

        dataIndex: 'zuizhong',

        align: "center",

        ellipsis: true,

        slots: {

            customRender: "zuizhong",

        },

    },

    {

        title: '综合得分',

        dataIndex: 'zonghe',

        align: "center",

        ellipsis: true,

    },

    {

        title: '任务评价',

        dataIndex: 'renwu',

        align: "center",

        ellipsis: true,

        slots: {

            customRender: "renwu",

        },

       

    },

    {

        title: '开启/关闭',

        dataIndex: 'kaiguan',

        align: "center",

        ellipsis: true,

        slots: {

            customRender: "kaiguan",

        },

       

    },

    {

        title: '状态',

        dataIndex: 'zhuangtai',

        align: "center",

        ellipsis: true,

        slots: {

            customRender: "zhuangtai",

        },

    },

    {

        title: '操作',

        dataIndex: 'caozuo',

        align: 'center',

        slots: { customRender: 'caozuo' },

    },

]);