antd table 行合并
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antd table 行合并相关的知识,希望对你有一定的参考价值。
参考技术A 官方文档有说明大概意思就是根据行/列的index值,设置index行/列的rowSpan/colSpan的值。其实还是得静心下来慢慢看例子就懂了
现有如下数据类型
根据规则,合并行的话,最终的数据结构应该是
这里写了一个函数做处理
入参:
data-传入的tabel数组
key-表格的每行数据根据哪个相同字段进行合并(这里是userType)
rowspan: 合并后的数据集的rowSpan的字段(有可能有多列的行需要合并,但是最终要返回的是一个数据,为了避免rowspan重复,所以才加了这个入参)
出参:
最后在表格columns渲染列的render那里
希望能帮助到遇到同样问题的你~~~
另外,不懂reduce用法的小伙伴可以看我的上篇文章 https://www.jianshu.com/p/c91d4c8409c0
ant design-Table组件实现每一行某个特定字段连续相同进行行合并。
需求:表格数据,要求后台返回的数据中,每一行客户姓名连续相同时进行行合并。
需求原型:
解决方案:
首先看ant Table官网的demo,如何实现行合并:
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>{text}</a>; } return { children: <a>{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 cell if (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);
demo核心代码:
如上图所示,demo中哪一行进行行合并是固定写死的,那如何实现后台数据客户姓名字段连续相同时合并呢。
代码如下:
/** * @param {*} data [后台数据] * @param {*} key [要合并的字段] * @param {*} target [后台数据对应的index] * @returns 合并的行数 * method of 获取合并的行数 */ function getRowSpanCount(data, key, target) { if (!Array.isArray(data)) return 1; data = data.map(_ => _[key]); // 只取出筛选项 let preValue = data[0]; const res = [[preValue]]; // 放进二维数组里 let index = 0; // 二维数组下标 for (let i = 1; i < data.length; i++) { if (data[i] === preValue) { // 相同放进二维数组 res[index].push(data[i]); } else { // 不相同二维数组下标后移 index += 1; res[index] = []; res[index].push(data[i]); preValue = data[i]; } } const arr = []; res.forEach((_) => { const len = _.length; for (let i = 0; i < len; i++) { arr.push(i === 0 ? len : 0); } }); return arr[target]; }
如何调用:
页面效果:
以上是关于antd table 行合并的主要内容,如果未能解决你的问题,请参考以下文章
ant design-Table组件实现每一行某个特定字段连续相同进行行合并。