antdvue-Table首列合并

最新推荐文章于 2025-04-24 11:57:00 发布

喔烨鸭

最新推荐文章于 2025-04-24 11:57:00 发布

阅读量3.2k

点赞数 2

分类专栏：笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_45432996/article/details/124785621

版权

笔记专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在Vue应用中使用Ant Design Table组件实现数据源的合并列和动态列宽，通过rowSpan方法根据接口返回的数据调整表格布局。适合前端开发者理解和实践数据处理技巧。

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

<a-table
                        :columns="noPmColumns"
                        :dataSource="sourceLeftData"
                        :loading="tableLoading"
                        :scroll="{  }"
                        rowKey="rowKeyInfo"
                        :showHeader="false"
                        :pagination="false"
                        size="middle"
                        bordered
                    >
                    </a-table>

noPmColumns:[
                {
                    title:"mpdGroup",
                    dataIndex:"mpdGroup",
                    width: 127,
                    align: "center",
                    customRender:(value, row, index)=>{
                        const obj = {
                            children: value,
                            attrs: {},
                        }; 
                        obj.attrs.rowSpan = row.mergeRowSpan;         
                        return obj
                    }
                },
                {
                    title:"eqpId",
                    dataIndex:"eqpId",
                    width: 127,
                    align: "center",
                },
                {
                    title:"chamberList",
                    dataIndex:"chamberList",
                    scopedSlots: { customRender: "action" },
                    align: "center",
                    customCell:function(record,index){
                        return {
                            style:{
                                padding:'1px !important'
                            }
                        }
                    }
                },
            ],
            sourceLeftData:[],

合并第一列的方法：
在请求到接口的list数据后，调用rowSpan方法

//getData代表请求过来的list
//dataIndex代表每一行的第一列的key名称
rowSpan(getData,dataIndex) {
            //过滤合并后现实的表格内容
            let arr = getData
                .reduce((result, item) => {
                //不存在则放入展示结果
                if (result.indexOf(item[dataIndex]) < 0) {
                    result.push(item[dataIndex]);
                }
                return result;
                }, [])
                //确定每个合并的合并行数
                .reduce((result, keys) => {
                    //计算出可以合并的数据
                    const children = getData.filter((item) => item[dataIndex] === keys);
                    result = result.concat(
                    //计算出合并行数
                        children.map((item, index) => ({
                        ...item,
                        [`mergeRowSpan`]: index === 0 ? children.length : 0,
                        }))
                    );
                    return result;
                }, []);
                console.log("arr",arr);
                //将最后展示的数据替换原数据
            this.sourceLeftData = arr;
            
        },