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 行合并的主要内容,如果未能解决你的问题,请参考以下文章

antd-vue table合并单元格

ant design-Table组件实现每一行某个特定字段连续相同进行行合并。

react简述2:在react中使用antd的table组件

react+antd表格之行/列合并

el-table 合并行

HTML的table中如何合并多行?