react ant table 表格合并单元格

最新推荐文章于 2024-07-09 16:44:27 发布

南城夏季

最新推荐文章于 2024-07-09 16:44:27 发布

阅读量528

点赞数

分类专栏：问题业务 react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_39818813/article/details/126744101

版权

问题同时被 3 个专栏收录

75 篇文章 0 订阅

订阅专栏

业务

61 篇文章 1 订阅

订阅专栏

react

52 篇文章 2 订阅

订阅专栏

这段代码展示了如何在Excel表格中通过JavaScript实现对公司名称相同的行数据进行合并。通过对数组遍历查找重复公司名，确定需要合并的单元格，并设置相应的rowSpan属性来完成合并操作。此功能适用于数据展示时避免重复信息的冗余展示。

摘要由CSDN通过智能技术生成

将行数据中公司名相同的数据进行合并

1. 代码

// 单元格合并
const getTablecells = (_, index, s) => {
    let str = _.companyName
    // 取出公司名
    var arr = config.tableData.map((item) => {
        return item.companyName
    })
    function duplicates(arr) {
        var Arr = []
        arr.forEach((elem, index) => {
            if (
                arr.indexOf(elem) !== arr.lastIndexOf(elem) &&
                Arr.indexOf(elem) === -1
            ) {
                Arr.push({
                    indexs: index,
                    val: elem,
                })
            }
        })
        return Arr
    }
    // 找到相同公司名项
    let sameArr = duplicates(arr)
    let arr0 = sameArr.filter((item1) => item1.val == str)
    // 如果是index匹配上了,并且是匹配到的第一项那么当前格需要合并.
    // 如果是index匹配上了,但不是匹配到的第一项那么当前格需要去除.
    // 如果是index没匹配,显示默认的一格 
    let obj = {
        rowSpan:
            arr0[0] && index == arr0[0].indexs
                ? arr0.length
                : arr0.filter((item1) => item1.indexs == index).length
                    ? 0
                    : 1,
    }
	for(var i = 0;i<9;i++){
		return obj
	}
    return {}
}

// 配置表格列
const columns: TableListItem[] = [
    {
        title: '序号',
        // dataIndex: 'id',
        valueType: 'indexBorder',
        hideInSearch: true,
        width: 40,
        onCell: (_, index, s) => { return getTablecells(_, index, s) },
    },
    {
        title: '公司名称',
        width: 120,
        dataIndex: 'companyName',
        onCell: (_, index, s) => { return getTablecells(_, index, s) },
    }, {
        title: '印章数量',
        width: 80,
        dataIndex: 'sealNumber',
        hideInSearch: true,
        onCell: (_, index, s) => { return getTablecells(_, index, s) },
    },
]