vue-ant-design实现＜a-table＞表格行合并

最新推荐文章于 2025-07-03 17:33:41 发布

梦想天涯~路在脚下

最新推荐文章于 2025-07-03 17:33:41 发布

阅读量3.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_26420601/article/details/108818027

前端开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用 AntDesign Vue 在表格中实现单元格的合并功能，并提供了具体的代码示例。通过自定义渲染函数，可以实现按指定列进行行合并，适用于展示分组数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考Ant design Vue官网关于行和列合并api

Ant Design Vue

<template>
    <a-locale-provider :locale="locale">
        <div id="app" class="regulationId">
            <div style="">
                <a-card :bordered="false">
                    <div style="display: inline-block;height: 64px;text-align: left;padding-left: 40%;font-size: 15px;color: #007df9;margin-bottom: 20px;">
                        <span style="color: rgb(0, 0, 0);display: block;font-size: 21px;margin-left: -9%;line-height: 43px;">{{pageTitleDate}}</span>
                        <div style="margin-left: -9%;text-align: center;">
                            <span @click="fetchList('0','prev')" v-show="hideTeamModule"
                                  style="cursor: pointer;">上周</span>
                            <span @click="fetchList('prev')" v-show="!hideTeamModule" style="cursor: pointer;">上周</span>
                            <span @click="fetchList('0','now1')" v-show="showCurWeek" style="cursor: pointer;">&nbsp&nbsp&nbsp本周</span>
                            <span @click="fetchList('0','now')" v-show="showAllWeek" style="cursor: pointer;">&nbsp&nbsp&nbsp本周</span>
                            <span @click="fetchList('now2')" v-show="!hideTeamModule" style="cursor: pointer;">&nbsp&nbsp&nbsp本周</span>
                            <span @click="fetchList('0','next')" v-show="hideTeamModule" style="cursor: pointer;">&nbsp&nbsp&nbsp下周</span>
                            <span @click="fetchList('next')" v-show="!hideTeamModule" style="cursor: pointer;">&nbsp&nbsp&nbsp下周</span>
                        </div>
                    </div>
                    <a-spin :spinning="spinning">
                        <div style="margin-bottom: 10px;text-align: right;">
                            <a-checkbox @change="switchViewText">
                                仅显示不足工时
                            </a-checkbox>
                        </div>
                        <a-table
                                size="middle"
                                rowKey="id"
                                bordered
                                :columns="columns"
                                :data-source="data"
                                :pagination="false"
                                :scroll="{y: scrollY}"
                        >
                        </a-table>
                    </a-spin>
                </a-card>
            </div>
        </div>
    </a-locale-provider>
</template>
<script>
    import {postAction} from "../../api/manage.js";
    import JDate from "../../components/JDate";
    import zhCN from 'ant-design-vue/es/locale/zh_CN'

    // 动态计算需要合并的单元格的行
    const temp = {}; // 当前重复的值,支持多列
    const mergeCells = (text, array, columns) => {
        let i = 0;
        if (text !== temp[columns]) {
            temp[columns] = text;
            array.forEach((item) => {
                if (item.teamName === temp[columns]) {
                    i += 1;
                }
            });
        }
        return i;
    };
    export default {
        name: "WeeklyWorkingHours",
        components: {
            JDate,
        },
        created: function () {
            this.fetchList('0', 'now1');// 初始化数据
            this.scrollY = window.innerHeight - 200;
        },

        mounted() {
        },

        methods: {
            // 初始化加载列表数据
            fetchList(flg, typeVal) {
                let that = this;
                that.hideTeamModule = true;
                if (typeVal == 'now') {
                    that.showCurWeek = false;
                    that.showAllWeek = true;
                }
                if (typeVal == 'now1') {
                    that.showCurWeek = true;
                    that.showAllWeek = false;
                }
                if (typeVal == 'now' || typeVal == 'prev' || typeVal == 'next') {//全部
                    that.type = typeVal;
                } else if (typeVal == 'now1' || typeVal == 'prev' || typeVal == 'next') {//我的
                    if (typeVal == 'now1') {
                        that.type = 'now';
                    } else {
                        that.type = typeVal;
                    }
                }
                let params = {
                    personId: that.queryPersonId,// 人员Id（查询条件）
                    type: that.type,// 查询标记位
                    pageTitleDate: that.pageTitleDate,
                    checkStatus: this.checkFlag,// 仅显示不足工时标记位
                };
                postAction(that.url.listUrl, params).then((res) => {
                    that.spinning = true;
                    if (res.status == 200) {
                        that.data = res.data.json.keys.rsList;// 返回的数据
                        that.storeDatas = res.data.json.keys.rsList;// 返回的数据
                        that.pageTitleDate = res.data.json.keys.pageTitleDate;// 时间段，以周为单位
                        if(that.checkFlag){
                            let newDatas = [];
                            for (let i = 0; i < that.data.length; i++) {
                                let actualHours = that.data[i].actualWeeklyWorkingHours;// 个人实际工时
                                let planHours = that.data[i].planWeeklyWorkingHours;// 个人计划工时
                                if(Number(actualHours) < Number(planHours)){
                                    newDatas.push(that.data[i]);
                                }
                            }
                            that.data = newDatas;
                        }else{
                            that.data = that.storeDatas;
                        }
                    } else {
                        that.$message.info("数据获取失败！");
                    }
                    that.spinning = false;
                })
            },
            // 查看不足工时和所有工时
            switchViewText(val){
                this.spinning = true;
                let checkStatus = val.target.checked;// 选中的状态 true 或 false
                if(checkStatus){// 仅显示不足工时
                    this.checkFlag = checkStatus;
                    let newDatas = [];
                    for (let i = 0; i < this.data.length; i++) {
                        let actualHours = this.data[i].actualWeeklyWorkingHours;// 个人实际工时
                        let planHours = this.data[i].planWeeklyWorkingHours;// 个人计划工时
                        if(Number(actualHours) < Number(planHours)){
                            newDatas.push(this.data[i]);
                        }
                    }
                    this.data = newDatas;
                    this.spinning = false;
                }else{// 显示所有工时
                    this.checkFlag = checkStatus;
                    this.data = this.storeDatas;
                    this.spinning = false;
                }
            },
        },

        data() {
            return {
                spinning: false,
                teamTreeData: [],// 班组树菜单
                replaceFields: {
                    title: 'label',
                    key: 'value',
                },
                locale: zhCN,
                pageTitleDate: '',
                hideTeamModule: false,
                showCurWeek: true,
                showAllWeek: false,
                queryPersonId: '',
                checkFlag: false,// 仅显示不足工时标记位
                type: 'now',
                scrollY: '',
                url: {
                    listUrl: 'weeklyWorkingHoursBLH_list.do',// 初始化列表
                },
                columns: [
                    {
                        title: '序号',
                        dataIndex: 'index',
                        align: 'center',
                        width: '5%',
                        customRender: function (text, row, index) {
                            return parseInt(index) + 1;
                        }
                    },
                    {
                        title: '班组',
                        dataIndex: 'teamName',
                        align: "center",
                        customRender: (text, row, index) => {
                            if(text != ''){
                                const obj = {
                                    children: text + "组",
                                    attrs: {},
                                };
                                obj.attrs.rowSpan = mergeCells(row.teamName, this.data, 'teamName');
                                return obj;
                            }
                        },
                    },
                    {
                        title: '姓名',
                        dataIndex: 'userName',
                        align: "center",
                    },
                    {
                        title: '额外工时（h）',
                        dataIndex: 'extraWorkingHours',
                        align: "center",
                    },
                ],
                commLabelCol: {
                    xs: {span: 8}
                },
                commWrapperCol: {
                    xs: {span: 15}
                },
                data: [],
                storeDatas: [],
            }
        }
    };
</script>

<style scoped>
</style>

主要关注这段合并单元格的代码