Ant Design之表格动态合并行

最新推荐文章于 2024-08-23 11:38:09 发布

zhaodongxx

最新推荐文章于 2024-08-23 11:38:09 发布

阅读量5k

点赞数 4

分类专栏：前端文章标签： Ant Design of React React 前端合并行

本文链接：https://blog.csdn.net/dora_310/article/details/81125126

版权

在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,
      },