react + ant design 实现动态合并Table表格（相同数据合并为一条、支持多列）

已于 2023-03-08 23:50:32 修改
阅读量1.8k 收藏 6
点赞数
分类专栏： java学徒 文章标签： react.js javascript 前端
于 2023-03-07 22:37:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44174211/article/details/129393506
版权

参考

多列合并实现（有序）

  • 只支持要合并的列已排好序的情况

  • 效果
    在这里插入图片描述

const { createRoot } = ReactDOM;
const { Table } = antd;

const sharedOnCell2 = (record, index, colIndex) => {
  // console.log("data", data);
  // console.log("record", record);
  let dataIndexs = columns.map((o) => o.dataIndex);
  console.log("dataIndexs:" + dataIndexs);

  // 获取数据源中，与当前单元格数据一致的记录，包括自己，只有自己，则 rowSpan=1，刚刚好 
  let arr = data.filter((res) => {
    // return res.name == record.name;
    return getValues(res, colIndex) == getValues(record, colIndex);
  });
  let rowSpan = 1;
  // if (index == 0 || data[index - 1].name != record.name) {
  if (
    index == 0 ||
    getValues(data[index - 1], colIndex) != getValues(record, colIndex)
  ) {
    // 第一行 || 与上一行数据不相等
    rowSpan = arr.length;
  } else {
    // 0表示单元格不会渲染，即不显示，被合并的单元格设为0
    // 不需要合并的单元格还是要显示，所以不能设为0，可以设为空或者1
    rowSpan = 0;
  }
  return { rowSpan: rowSpan };
};

// 获取单元格用来比较的值
// 因为是否合并需要依赖前面的列，所以不能单纯的取值，需要将前面单元格的值也拼接在前面
const getValues = (record, colIndex) => {
  // console.log("getValues--record", record);
  let dataIndexs = columns.map((o) => o.dataIndex);
  console.log("dataIndexs:" + dataIndexs);
  let str = "";
  for (let i = 0; i <= colIndex; i++) {
    // 加一个特殊的连接符，避免2个单元格分开不一样、但合起来变一样的情况
    str += record[dataIndexs[i]] + "@@@";
  }
  return str;
};

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    tel: "0571-22098909",
    phone: 18889898989,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "1",
    name: "John Brown",
    tel: "0571-22098333",
    phone: 18889898888,
    age: 32,
    address: "London No. 1 Lake Park"
  },
  {
    key: "1",
    name: "John Brown2",
    age: 32,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Sydney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "Jim Red",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "London No. 2 Lake Park"
  },
  {
    key: "4",
    name: "Jim Red",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park"
  }
];

const columns = [
  {
    title: "RowHead",
    dataIndex: "key",
    rowScope: "row",
    onCell: (record, index) => {
      return sharedOnCell2(record, index, 0);
    }
  },
  {
    title: "Name",
    dataIndex: "name",
    onCell: (record, index) => {
      return sharedOnCell2(record, index, 1);
    }
  },
  {
    title: "Age",
    dataIndex: "age",
    onCell: (record, index) => {
      return sharedOnCell2(record, index, 2);
    }
  },
  {
    title: "Home phone",
    colSpan: 2,
    dataIndex: "tel"
  },
  {
    title: "Phone",
    colSpan: 0,
    dataIndex: "phone"
  },
  {
    title: "Address",
    dataIndex: "address"
  }
];

const App = () => <Table columns={columns} dataSource={data} bordered />;
const ComponentDemo = App;

createRoot(mountNode).render(<ComponentDemo />);

多列合并实现（无序、空值选择合并或不合并）

const { createRoot } = ReactDOM;
const { Table } = antd;

const sharedOnCell2 = (record, index, colIndex) => {
  //console.log("data", data);
  //console.log("record", record);
  //let dataIndexs = columns.map((o) => o.dataIndex);
  //console.log("dataIndexs:" + dataIndexs);

  // 处理数据未排好序的情况
  let arr = data.filter((res,i) => {
    // return res.name == record.name;
    res.i = i;
    // 空值不合并 赋id或是uuid
    return getValues(res, colIndex, i) == getValues(record, colIndex, index);
    // 空值合并
    // return getValues(res, colIndex, null) == getValues(record, colIndex, null);
  });
  console.log('iiiii:', arr[0])
  // 自己是肯定存在的
  if (arr.length > 1) {
    // 保证序号连续，并且自己存在
    // 上一个
    let pre = arr[0]
    let arr2 = [arr[0]]
    // 自己是否出现
    let b = arr[0].i == index ? true : false;
    for (let i = 1; i < arr.length; i++) {
       // 当前
       let cur = arr[i];
       if ((cur.i - 1) != pre.i) {
         // 不相等 断续
         if (b) {
           break;
         } else {
           arr2 = []
         }
       }
      
       // b = arr[0].i == index ? true : b;
       b = arr[i].i == index ? true : b;
      
       arr2.push(cur)
       pre = cur;
    }
    arr = arr2;
    
  }
  console.log('arrarr:', arr)
  
  let rowSpan = 1;
  // if (index == 0 || data[index - 1].name != record.name) {
  if (
    index == 0 ||
    getValues(data[index - 1], colIndex, index - 1) != getValues(record, colIndex, index)
    // getValues(data[index - 1], colIndex, null) != getValues(record, colIndex, null)
  ) {
    rowSpan = arr.length;
  } else {
    rowSpan = 0;
  }
  return { rowSpan: rowSpan };
};

// 传index 则空值不合并，不传，空值合并
const getValues = (record, colIndex, index) => {
  // console.log("getValues--record", record);
  let dataIndexs = columns.map((o) => o.dataIndex);
  console.log("dataIndexs:" + dataIndexs);
  let str = "";
  for (let i = 0; i <= colIndex; i++) {
    let str1 = record[dataIndexs[i]];
    str1 = str1 ? str1 : (index ? (index + "!@#") : "");
    str += str1 + "@@@";
  }
  return str;
};

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    tel: "0571-22098909",
    phone: 18889898989,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "1",
    name: "John Brown2",
    tel: "0571-22098333",
    phone: 18889898888,
    age: 32,
    address: "London No. 1 Lake Park"
  },
  {
    key: "1",
    name: "John Brown2",
    age: 32,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Sydney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "John Brown",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "London No. 2 Lake Park"
  },
  {
    key: "4",
    name: "John Brown",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park"
  }
  
  {
    key: "1",
    name: null,
    age: 32,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Sydney No. 1 Lake Park"
  },
  {
    key: "4",
    name: null,
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "London No. 2 Lake Park"
  },
  {
    key: "4",
    name: null,
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "London No. 2 Lake Park"
  },
  {
    key: "4",
    name: "John Brown",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park"
  },
  {
    key: "4",
    name: "John Brown",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park"
  }

];

const columns = [
  {
    title: "RowHead",
    dataIndex: "key",
    rowScope: "row",
    onCell: (record, index) => {
      return sharedOnCell2(record, index, 0);
    }
  },
  {
    title: "Name",
    dataIndex: "name",
    onCell: (record, index) => {
      return sharedOnCell2(record, index, 1);
    }
  },
  {
    title: "Age",
    dataIndex: "age",
    onCell: (record, index) => {
      return sharedOnCell2(record, index, 2);
    }
  },
  {
    title: "Home phone",
    colSpan: 2,
    dataIndex: "tel"
  },
  {
    title: "Phone",
    colSpan: 0,
    dataIndex: "phone"
  },
  {
    title: "Address",
    dataIndex: "address"
  }
];

const App = () => <Table columns={columns} dataSource={data} bordered />;
const ComponentDemo = App;

createRoot(mountNode).render(<ComponentDemo />);
银辰星辉
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd table 实现合并单元格
weixin_45954775的博客
08-04 343
【代码】antd table 实现合并单元格。
react antd+table实现合并单元格
最新发布
weixin_53363875的博客
07-09 95
react antd+table实现合并单元格。
ant-design实现单元格合并
qq_27175079的博客
03-12 870
如下图所示，官网只给了一个写死的例子，不太符合正常项目中遇到的情况. 项目中一般是后端经过排序把数据返回给前端，前端根据字段设置rowSpan,期望结果如下图 核心代码如下 执行数据处理方法 export const handleSpan = (result: any[], key: string) => { result.forEach((e) => (e.rowSpan = 1)); // 记录开始合并的位置 let num = -1; let obj =
antd Table 动态数据 合并单元格（合并行）
芝芝为荔枝
01-06 4870
最近处理table的时候 遇到了要合并同一列的几行的情况，比如第一列的前面三行都是同一个对象的名字，此时合并显示比较妥当，但是数据是后端接口来的，而且可以筛选条件，搜索出来的数据就是动态的长度，可能这次需要合并前面的五行， 在原有的静态数据的合并的基础上，需要加上一个合并的逻辑代码。，遇到需要合并的行，设置rowSpan的数量为需要合并的行总数，然后把后面的rowSpan设置为0（不渲染该位置），否则这个表格就会乱套。下面就是我们合并了 ‘分类’ 列下面的 【1,2】行 ，【4,5,6】 行。
react使用antd组件合并Table单元格
wx258852的博客
12-06 1005
初始化合并单元格，必须对应projectnameRowSpan行名称重新组合方法。行数据可编辑方法，总数据编辑。
react ant table 表格合并单元格
weixin_39818813的博客
09-07 514
将行数据中公司名相同的数据进行合并。
react antd table合并表格行
坚强的泡沫的博客
06-16 516
react antd table合并表格行
react+ant design实现Table的增、删、改的示例代码
01-19
本人小白一名，第一次学习react ,该资料为本人原创，采用的是react+ant design的Tabled的一个小demo,暂时只实现了增加，删除单行，多行删除有Bug,查看详情，呕心沥血耗时一周完成，禁止抄袭，转载请先留言， ...
react + Ant Design + 支持 markdown 的博客前台展示.zip
02-28
在本项目中，我们主要探讨的是如何利用React框架与Ant Design库来构建一个支持Markdown格式的博客前台展示系统。这个项目对于理解Web开发中的前端技术，尤其是React组件化开发和Markdown解析具有很好的实践价值。 ...
React Ant Design树形表格的复杂增删改操作
01-18
最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了这里。 树形表格的显示 在antd中对于...
Ant Design Table表格动态合并
weixin_45945214的博客
09-14 497
Ant Design Table表格动态合并
react + ant design 实现动态合并Table表格（相同数据合并为一条）
Codernmx
07-21 4611
一、首先来看看需求，主要就是一个表格的合并 这里是官方文档给出的关于合并的方法 表头只支持列合并，使用 column 里的 colSpan 进行设置。 表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。 根据他给出的demo可以看出是要合并的第一个数据设置他的colSpan ，而后边不展示的数据给他设置colSpan /rowSpan 为0 就可以，但是这样子的话，根据后端返回的不确定数据就好像有点不好整了是吧（要是后端能直
react结合antd的Table组件实现动态单元格合并
qq_52845451的博客
02-19 3342
react结合antd的Table组件实现动态单元格合并
阿里ant组件库 a-table表格合并单元格
weixin_43056561的博客
06-22 2068
第一次接触阿里ant ui组件库,遇到需要合并单元格的需求,就去网上找了一个判断的方法,记录一下 这个是Vue项目里用到的 在js中声明 function getRowSpanCount(data, key, target) { if (!Array.isArray(data)) return 1; data = data.map(_ => _[key]); // 只取出筛选项 let preValue = data[0]; const res = [[preValue]]; // 放
ant design vue：列值相同的行合并
1111111111
02-24 2152
比如一个5行的表格，1、2、3行值相同，4、5行相同，那么上面的数组就是[3,0,0,2,0]，就是说第1行占3行，第2、3行不占行，这样就相当于把3行合并成1行了，以此类推。上面的方法可以生成一个数组，这个数组保存了需要合并的每一行的rowSpan，然后根据index设置每个的rowSpan就可以了。原博客用的是props，但是antd的官网用的是attrs，我试了一下，用props确实没有效果。列值相同的行合并，这种需求很常见，找了很多合并行的例子，才解决了我的问题。
【React - Antd -Table 单元格多列纵向合并】
weixin_44542404的博客
04-12 454
原文亲测可用，在原基础上进行了升级，原文是单列纵向合并，扩展至多列纵向合并。
react+antd+table行列合并（根据学校，院系 年级 专业等字段进行合并）
weixin_43999634的博客
03-14 335
2：核心代码如下，spanMap 计算每行合并的起始索引和合并的行数。
antd 中 Table表格合并
qq_33472885的博客
08-16 4947
1.先获取所要合并的列中的rowkey 2.当值在多个页面出现时重新记录rowSpan 3.合并相同的列 const defectSpan = [{ spanName: '小明', defect: '', oid: '1', }, ...15个一样de // oid不一样 { spanName: '小明小明', defect: '', ...
antd之table行合并
qq_44213014的博客
11-05 3080
antd之table行合并 要是实现的效果 思路： 1.第一行 或 当前行与上一行 制定字段值不一样 就进行合并行数计算 2.不满足条件就不渲染出来 定义合并行数方法 // 计算合并行数 getMergeRowNum = (col_name, row, dataSource, compare_col_name = null) => { const temp = {}; let n = 0; if (col_name !== temp[col_name]) {
帮我用react+antdesign实现一个表格嵌套两层表格的效果
06-01
好的，下面是一个简单的实现示例： ```javascript import React from "react"; import { Table } from "antd"; const columns1 = [ { title: "姓名", dataIndex: "name", key: "name" }, { title: "年龄", dataIndex: "age", key: "age" }, { title: "住址", dataIndex: "address", key: "address" }, ]; const data1 = [ { key: "1", name: "John Brown", age: 32, address: "New York No. 1 Lake Park" }, { key: "2", name: "Jim Green", age: 42, address: "London No. 1 Lake Park" }, { key: "3", name: "Joe Black", age: 32, address: "Sidney No. 1 Lake Park" }, ]; const columns2 = [ { title: "科目", dataIndex: "subject", key: "subject" }, { title: "成绩", dataIndex: "score", key: "score" }, ]; const data2 = [ { key: "1", subject: "数学", score: 90 }, { key: "2", subject: "英语", score: 80 }, { key: "3", subject: "语文", score: 95 }, ]; const expandedRowRender = (record) => { const subTableData = [ { key: "1", subject: "数学", score: 90 }, { key: "2", subject: "英语", score: 80 }, { key: "3", subject: "语文", score: 95 }, ]; const subTableColumns = [ { title: "科目", dataIndex: "subject", key: "subject" }, { title: "成绩", dataIndex: "score", key: "score" }, ]; return <Table columns={subTableColumns} dataSource={subTableData} pagination={false} />; }; const TableWithNestedTable = () => { return ( <Table columns={columns1} dataSource={data1} pagination={false} expandedRowRender={expandedRowRender} /> ); }; export default TableWithNestedTable; ``` 首先，我们先定义两个表格的列和数据，分别为 `columns1` 和 `data1`，以及嵌套的表格的列和数据，分别为 `columns2` 和 `data2`。 然后，我们定义一个 `expandedRowRender` 函数，该函数接受一个参数 `record`，表示当前行的数据。在该函数中，我们返回一个嵌套的表格，该表格的列和数据为 `columns2` 和 `data2`。 最后，我们在主表格中添加 `expandedRowRender` 属性，并将其值设置为 `expandedRowRender` 函数，这样就可以实现表格嵌套两层表格的效果了。 注意，我们在嵌套的表格中将 `pagination` 属性设置为 `false`，以禁用分页功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值