vue3表格合并+children

const formatTable = (dataArr) => {
            let newTable = []
            let reqIdList = []
            dataArr.forEach((item) => {
                reqIdList.push(item.reqId)
                if (item.dataList && item.dataList.length) {
                    item.dataList.forEach((itemTwo, indexTwo) => {
                        if ( indexTwo === 0 ) { 
                            newTable.push({ ...itemTwo, reqId: item.reqId, billNo: item.billNo, rowspan: item.dataList.length })
                        } else {
                            newTable.push({ ...itemTwo, reqId: item.reqId, billNo: item.billNo })
                        }
                        
                    })
                }
            })
            data.reqIdList = reqIdList
            return newTable
        }
        const objectSpanMethod = ({columnIndex, row}) => {
            let mergeCol = [ 1 ]
            if (mergeCol.includes(columnIndex) && data.isMore) {
                if (row.rowspan) {
                    return {
                        rowspan: row.rowspan || 1,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        }

如果是有多级合并需要嵌套遍历

ormatTable(dataArr) {

            console.log('dataArrdataArr',dataArr)

            let newTable = []

            dataArr.forEach((item, itemIndex) => {  

                if (item.hospitalAreaExpertDTOList && item.hospitalAreaExpertDTOList.length) {

                    item.hospitalAreaExpertDTOList.forEach((itemTwo, indexTwo) => {

                        if (itemTwo.expertInfoDTOList && itemTwo.expertInfoDTOList.length) {

                            itemTwo.expertInfoDTOList.forEach((itemThree, indexThree) => {

                                if (indexThree === 0 && indexTwo === 0) {

                                    newTable.push({

                                        rowspan: item.clinicSize,

                                        rowspan1: itemTwo.expertInfoDTOList.length,

                                        ...itemThree,

                                        hospitalAreaExpertDTOList:item.hospitalAreaExpertDTOList,

                                        doctorName: item.doctorName,

                                        introduce:item.introduce,

                                        titleName:item.titleName,

                                        recommendFlag:item.recommendFlag,

                                        imgPath:item.imgPath,

                                        index:itemIndex + ((this.searchData.page - 1) * (this.searchData.pageSize) + 1)

                                    })

                                } else if (indexThree === 0) {

                                    newTable.push({

                                        rowspan1: itemTwo.expertInfoDTOList.length,

                                        ...itemThree,

                                        introduce:item.introduce,

                                        hospitalAreaExpertDTOList:item.hospitalAreaExpertDTOList,

                                        doctorName: item.doctorName,

                                        titleName:item.titleName,

                                        recommendFlag:item.recommendFlag,

                                        imgPath:item.imgPath,

                                        index:itemIndex + ((this.searchData.page - 1) * (this.searchData.pageSize) + 1)

                                    })

                                } else {

                                    newTable.push({

                                        ...itemThree,

                                        introduce:item.introduce,

                                        hospitalAreaExpertDTOList:item.hospitalAreaExpertDTOList,

                                        doctorName: item.doctorName,

                                        titleName:item.titleName,

                                        recommendFlag:item.recommendFlag,

                                        imgPath:item.imgPath,

                                        index:itemIndex + ((this.searchData.page - 1) * (this.searchData.pageSize) + 1)

                                    })

                                }

                            })

                        }

                    })

                }

            })

            console.log('newTable',newTable) return newTable

      },

如果是已经有了正常的数据格式 但是想要将某个字段(sourceName)合并起来 可以用以下

如果是这样的数据 而不是children类型的,那么需要先处理成children数据

const formartTable = (dataArr) => {

            let arrTwo = dataArr.reduce((result, item) => {

                // 根据 prescNum 来分组

                // const key = item.termCode

                const key = result.find(group => group.termCode === item.termCode);

                if (key) {

                    key.items.push(item)

                } else {

                    result.push({ termCode: item.termCode, items: [item] })

                }

                return result;

            }, []);

            let newArr = []

            arrTwo.forEach((e,index) => {

                if (e.items && e.items.length) {

                    e.items.forEach((i, indexTwo) => {

                        if (indexTwo == 0) {

                            newArr.push({...i, rowspan: e.items.length})

                        } else {

                            newArr.push({...i})

                        }

                    })

                }

            })

            return newArr

        }

### 如何在 Ant Design Vue 表格组件中实现单元格合并 #### 使用 `customRender` 实现单元格合并 为了实现在 Ant Design Vue表格组件中的单元格合并功能,可以利用 `a-table-column` 标签内的 `customRender` 属性来定义一个函数。此方法允许指定哪些单元格应该被合并以及它们应跨越多少行。 ```html <a-table :columns="columns" :data-source="dataSource"> <a-table-column data-index="logisticObj" width="150px" :customRender="mergeTable"></a-table-column> </a-table> ``` 对于上述 HTML 片段,在 JavaScript 部分可以通过设置 `attrs.rowSpan` 来决定要跨过的行数[^1]: ```javascript methods: { mergeTable(text, record, index) { return { children: text, attrs: { rowSpan: calculateRowSpan(record), // 自定义计算逻辑 }, }; } } ``` 这里的 `calculateRowSpan()` 函数可以根据业务需求自定义编写,用于判断当前记录应当占据的行数。 #### 导入辅助工具简化操作 除了手动处理外,还可以借助外部库进一步简化这一过程。例如,通过导入特定的帮助函数可以直接应用于整个表格或某些列上以达到自动化的效果: ```javascript import { computeMergeCellSpan, mergeCellRender } from &#39;@/utils/verticalMergeCell&#39;; ``` 这些帮助程序能够自动检测相邻相同值并相应调整其显示样式[^2]。 #### 动态计算合并范围 当面对更复杂的情况时,比如基于不同条件动态改变合并行为,则可以在计算属性内构建列结构的同时加入相应的判定机制: ```javascript computed: { columns() { return [ { title: &#39;序号&#39;, dataIndex: &#39;key&#39;, customRender(value, row, index) { const obj = { children: value, attrs: {} }; obj.attrs.rowSpan = determineMergedRows(row.key, this.dataSource); return obj; }, }, ... ]; } }, ``` 其中 `determineMergedRows()` 方法负责评估每一行是否需要与其他同行合并及其具体数量[^3]。 #### 完整示例行合并案例 最后给出一段完整的代码片段作为参考,展示了如何在一个名为 `name` 的字段下执行行级合并: ```javascript const generateColumns = (key) => ({ item: "name", title: "名称", dataIndex: key, customRender(value, row, index) { const tempobj = { children: value, attrs: { rowSpan: getMergeCount(key, row, dataSource) || 1 } }; return tempobj ; }, }); ``` 在此基础上,只需替换掉具体的键名和获取合并计数值的方法即可适应不同的应用场景[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值