Ant Design之表格动态合并行

在web开发中，表格的行合并是一个很常见的需求。antd也提供了这种功能，但是文档中的示例代码却和我想象中的相差甚远，如下所示，它是通过一种很笨的办法实现的行合并。这样当表格的数据源是动态获取的，我们就没有办法动态的合并行。

官方代码

蚂蚁框架的官方文档代码，我的代码见最后


import { Table } from 'antd';// In the fifth row, other columns are merged into first column
// by setting it's colSpan to be 0
const renderContent = (value, row, index) => {const obj = {children: value,props: {},};if (index === 4) {obj.props.colSpan = 0;}return obj;
};const columns = [{title: 'Name',dataIndex: 'name',render: (text, row, index) => {if (index < 4) {return <a href="javascript:;">{text}</a>;}return {children: <a href="javascript:;">{text}</a>,props: {colSpan: 5,},};},
}, {title: 'Age',dataIndex: 'age',render: renderContent,
}, {title: 'Home phone',colSpan: 2,dataIndex: 'tel',render: (value, row, index) => {const obj = {children: value,props: {},};if (index === 2) {obj.props.rowSpan = 2;}// These two are merged into above cellif (index === 3) {obj.props.rowSpan = 0;}if (index === 4) {obj.props.colSpan = 0;}return obj;},
}, {title: 'Phone',colSpan: 0,dataIndex: 'phone',render: renderContent,
}, {title: 'Address',dataIndex: 'address',render: renderContent,
}];const data = [{key: '1',name: 'John Brown',age: 32,tel: '0571-22098909',phone: 18889898989,address: 'New York No. 1 Lake Park',
}, {key: '2',name: 'Jim Green',tel: '0571-22098333',phone: 18889898888,age: 42,address: 'London No. 1 Lake Park',
}, {key: '3',name: 'Joe Black',age: 32,tel: '0575-22098909',phone: 18900010002,address: 'Sidney No. 1 Lake Park',
}, {key: '4',name: 'Jim Red',age: 18,tel: '0575-22098909',phone: 18900010002,address: 'London No. 2 Lake Park',
}, {key: '5',name: 'Jake White',age: 18,tel: '0575-22098909',phone: 18900010002,address: 'Dublin No. 2 Lake Park',
}];ReactDOM.render(<Table columns={columns} dataSource={data} bordered />,mountNode);

动态合并行代码示例

因为在网上也没有找到合适的解决方案，所以把自己的实现分享出来，希望对大家有所帮助。

在线演示

表格数据中被合并的列应该是经过排序的，保证所有相同的行都呆在一起能够被合并


const { Table } = antd;// In the fifth row, other columns are merged into first column
// by setting it's colSpan to be 0
const renderContent = (value, row, index) => {const obj = {children: value,props: {},};return obj;
};const data = [{key: '1',name: 'A',age: 32,tel: '0571-22098909'
}, {key: '2',name: 'A',age:12,tel: '0571-22098333'
}, {key: '3',name: 'B',age: 32,tel: '0575-22098909'
}, {key: '4',name: 'B',age: 18,tel: '0575-22098909'
}, {key: '5',name: 'B',age: 18,tel: '0575-5'
}, {key: '6',name: 'C',tel: '0571-6',age:12
}, {key: '7',name: 'C',tel: '0571-7',age:19
}];var myArray=new Array(data.length);console.error(data.length);var func =(data)=>{//保存上一个namevar x = "";//相同name出现的次数var count = 0;//该name第一次出现的位置var startindex=0;for(var i = 0;i<data.length;i++){//这里是合并name列，根据各自情况大家可以自己完善var val = data[(i)].name;if(i==0){x=val;count=1;myArray[0]=1}else{if(val==x){count++;myArray[startindex]=count;myArray[i]=0}else{count = 1;x=val;startindex=i;myArray[i]=1}}}
}func(data)
console.table(myArray)const columns = [{title: 'Name',dataIndex: 'name',render: (value, row, index) => {const obj = {children: value,props: {},};obj.props.rowSpan = myArray[index];return obj},
}, {title: 'Age',dataIndex: 'age',render: renderContent,
}, {title: 'Home phone',dataIndex: 'tel',render: renderContent,
}];ReactDOM.render(<Table columns={columns} dataSource={data} bordered />,mountNode);

Ant Design之表格动态合并行相关推荐

vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
antd 表格树如何展开_React Ant Design树形表格的复杂增删改
React Ant Design树形表格的复杂增删改最近由于业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中碰见了很多坑,不少功能antd只写了初步的功能,更为细化 ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
ant design vue 表格中时间戳转换成时间格式显示
ant design vue 表格中时间戳转换成时间格式显示原始数据表格如上图,因为接口传递过来的时间是10位int类型的时间戳格式,所以前端需要我们把时间格式化. step1 安装moment n ...
Ant Design Pro 4 动态菜单icon丢失解决办法
最近在开发人事管理系统,其中菜单是需要动态渲染,针对不同角色授权不同的菜单权限. 路由由后端返回,格式如下: [ { "path": "/", "na ...
ant design pro实现动态路由以及权限的控制
dynamic-menu-router ant design pro动态路由权限,目前基于ant design pro1.4.4版本,只用于左侧菜单权限的设置和按钮权限设置,关于最新版本权限的更新,敬 ...
ant design table 表格空白
据我查找,情况可能有如下几点: 1.table设置了tableLayout:fixed,导致每个格子的css的color:transparent改变了原来的颜色 2.table的columns设置了e ...
Ant Design Vue 表格内编辑（附完整源码及效果图）
效果图: 实现关键代码就是表单的 columns 属性对象下标的 scopedSlots: scopedSlots: {customRender: '' } 实现完整代码: <template& ...

Ant Design之表格动态合并行

官方代码

动态合并行代码示例

Ant Design之表格动态合并行相关推荐

最新文章

热门文章