【React工作记录一百零一】再次接触老朋友react+ant design table合并单元格(1)

简介: #yyds干货盘点 再次接触老朋友react+ant design table合并单元格

第一个功能 如何渲染

参照官网案例

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];
<Table dataSource={dataSource} columns={columns} />;

当我们看完了这个基础案例以后 相信我们就已经清楚该定义数据格式了


最终数据格式

image.png


结果(解决)

第二个功能 如何合并

直接看全部代码 进行重点讲解

定义处理column哥的方法 加入render

const handleColumn = (columns) => {
    for (let i = 0; i < columns.length; i++) {
      if (columns[i]?.dataIndex == "cuttingName") {
        columns[i].render = data
      } else if (columns[i]?.dataIndex == "colorName") {
        columns[i].render = dataColor
      }
    }
    return columns
  }

datacolor处理合并逻辑

datacolor是一个函数 下面看我的定义


const dataColor = (value, row, index) => {
    const obj = {
      children: value,
      props: { rowSpan: 1 },
    }
    if (columns.length > 0) {
      return filterNumData(obj, dataSource, row, index, 'colorName')
    } else {
      return obj
    }
  }



if判断特别关键 不然刚刷新页面就会报错 因为render找不到对应属性


filterNumData处理合并逻辑核心

const filterNumData = (obj, arr, record, index, flag) => {
    let length = 0
    if (arr.length > 0) {
      for (let i = index; i < arr.length; i++) {
        if (i === arr.length - 1 && arr.length != 1) {
          if (arr[i - 1][`${flag}`] === record[`${flag}`]) {
            length += 1
            break
          }
        } else {
          if (arr[i][`${flag}`] === record[`${flag}`]) {
            length += 1
          } else {
            break
          }
        }
      }
    }



五个属性 我们分别讲解 obj 自己定义了 看如上 const obj = { children: value, props: { rowSpan: 1 }, } dataSource返回的数据

row render自带 index render自带 colorName 要合并的属性 最后重新setState columns 合并完成


image.png



相关文章
|
2月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
72 0
|
11月前
|
API
React+Hook+ts+antDesign实现table行编辑功能(1)
React+Hook+ts+antDesign实现table行编辑功能
139 0
|
7月前
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
48 0
|
8月前
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
63 0
|
11月前
|
前端开发 数据格式
再次接触老朋友react+ant design table合并单元格
再次接触老朋友react+ant design table合并单元格
107 0
|
11月前
|
前端开发 数据处理
React+Hook+ts+antDesign实现table行编辑功能(2)
React+Hook+ts+antDesign实现table行编辑功能
88 0
|
2月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
207 0
|
2月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
44 0
|
2月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
42 0
|
2月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
73 0