antdvue-Table首列合并

<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;
            
        },

你可能感兴趣的:(笔记,javascript,前端,vue.js)