从零到一实现复杂表格需求(antd table 合并行 合并列)

置顶 已于 2022-07-28 21:44:40 修改
阅读量2.7k 收藏 20
点赞数 8
分类专栏： 常用框架 文章标签： javascript 前端 reactjs
于 2022-07-28 21:35:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32930863/article/details/126044472
版权

很多小伙伴对于产品提出的陌生需求就“麻爪”。其实如何“解题”很重要，只要掌握正确的思考方式真的很简单。

效果展示

在这里插入图片描述

GIF 转换完比较糊

请添加图片描述

环境

antd@2.x 部分写法与本文不一样，但是思路是一样的

包名版本
react^16.14.0
antd4.22

分析需求

官方文档[Antd-Tabel]

  • 涉及 列左侧固定
    • columns.fixed = left
  • 涉及 table 横纵坐标滚动
    • table.scroll = { x:1,y:600 }
  • 涉及 table 表头列合并
    • columns.colSpan = 2
  • 涉及 table 行合并
    • columns.onCell(函数回调中处理)

细心的小伙伴可以在官方文档中找到以上每一个小需求的demo,没找到的可以去找一找。

理想数据结构

  • 通过表格可知
    • 日期维度 为表格展示的最小分组
    • 每个日期下包含四种类型的数据
  • 结论
    • 一个日期可以拆分为 4个row
    • row的数据应为 日期、父级类型、类型、用户1、 用户 2…

模拟此数据结构

const data = [
  {
    date: "2022-07-01",
    parentType: "conversion_monitor", // 转换监控
    type: "conversion_7", // 7日转化率
    // 以下数据结构后面会有变动
    user1: "1%", //用户1的7日转化率
    user2: "3%", //用户2的7日转化率
    user3: "10%", //用户3的7日转化率
    user4: "0%", //用户4的7日转化率
  },
  {
    date: "2022-07-01",
    parentType: "conversion_monitor", // 转换监控
    type: "conversion_30", // 30日转化率
    // 以下数据结构后面会有变动
    user1: "2%", //用户1的30日转化率
    user2: "1%", //用户2的30日转化率
    user3: "5%", //用户3的30日转化率
    user4: "5%", //用户4的30日转化率
  },
  {
    date: "2022-07-01",
    parentType: "trend_monitor", // 趋势监控
    type: "short_trend", // 短期趋势
    // 以下数据结构后面会有变动
    user1: "-0.001", //用户1的7日转化率
    user2: "0.05", //用户2的7日转化率
    user3: "0.02", //用户3的7日转化率
    user4: "-0.04", //用户4的7日转化率
  },
  {
    date: "2022-07-01",
    parentType: "trend_monitor", // 趋势监控
    type: "long_trend", // 长期趋势
    // 以下数据结构后面会有变动
    user1: "-0.002", //用户1的7日转化率
    user2: "0.06", //用户2的7日转化率
    user3: "0.01", //用户3的7日转化率
    user4: "-0.03", //用户4的7日转化率
  },
];

实现Demo代码

基本表格展示
import { Table } from "antd";

const Demo1 = () => {
  const data = [
    {
      date: "2022-07-01",
      parentType: "conversion_monitor", // 转换监控
      type: "conversion_7", // 7日转化率
      // 以下数据结构后面会有变动
      user1: "1%", //用户1的7日转化率
      user2: "3%", //用户2的7日转化率
      user3: "10%", //用户3的7日转化率
      user4: "0%", //用户4的7日转化率
    },
    {
      date: "2022-07-01",
      parentType: "conversion_monitor", // 转换监控
      type: "conversion_30", // 30日转化率
      // 以下数据结构后面会有变动
      user1: "2%", //用户1的30日转化率
      user2: "1%", //用户2的30日转化率
      user3: "5%", //用户3的30日转化率
      user4: "5%", //用户4的30日转化率
    },
    {
      date: "2022-07-01",
      parentType: "trend_monitor", // 趋势监控
      type: "short_trend", // 短期趋势
      // 以下数据结构后面会有变动
      user1: "-0.001", //用户1的7日转化率
      user2: "0.05", //用户2的7日转化率
      user3: "0.02", //用户3的7日转化率
      user4: "-0.04", //用户4的7日转化率
    },
    {
      date: "2022-07-01",
      parentType: "trend_monitor", // 趋势监控
      type: "long_trend", // 长期趋势
      // 以下数据结构后面会有变动
      user1: "-0.002", //用户1的7日转化率
      user2: "0.06", //用户2的7日转化率
      user3: "0.01", //用户3的7日转化率
      user4: "-0.03", //用户4的7日转化率
    },
  ];
  const columns = [
    {
      title: "日期",
      dataIndex: "date",
    },
    {
      title: "监控指标",
      dataIndex: "parentType",
    },
    {
      title: "监控指标",
      dataIndex: "type",
    },
    {
      title: "user1",
      dataIndex: "user1",
    },
    {
      title: "user2",
      dataIndex: "user2",
    },
    {
      title: "user3",
      dataIndex: "user3",
    },
    {
      title: "user4",
      dataIndex: "user4",
    },
  ];
  return (
    <div>
      <h2>Demo1</h2>
      <Table
        columns={columns}
        dataSource={data}
        pagination={false}
        bordered
      ></Table>
    </div>
  );
};

export default Demo1;

在这里插入图片描述

【Demo1-codesandbox】

表头合并

通过 columns.colSpan 进行表头合并

  const columns = [
    {
      title: "日期",
      dataIndex: "date",
    },
    {
      title: "监控指标",
      colSpan: 2,  // 设置占位2格
      dataIndex: "parentType",
    },
    {
      title: "监控指标",
      colSpan: 0,  // 设置占位0格
      dataIndex: "type",
    },
    {
      title: "user1",
      dataIndex: "user1",
    },
    {
      title: "user2",
      dataIndex: "user2",
    },
    {
      title: "user3",
      dataIndex: "user3",
    },
    {
      title: "user4",
      dataIndex: "user4",
    },
  ];

在这里插入图片描述

【Demo2-codesandbox】

行数据合并

通过 columns.onCell 处理行合并

  const columns = [
    {
      title: "日期",
      dataIndex: "date",
      /**
       * 每4行都是一个日期，从index = 0 开始，
       * 每隔4行的rowSpan为4，其余的rowSpan为0
       */
      onCell: (_, index) => ({
        rowSpan: index % 4 === 0 || index === 0 ? 4 : 0,
      }),
    },
    {
      title: "监控指标",
      colSpan: 2,
      dataIndex: "parentType",
      /**
       * 每2行组成了一个维度的监控指标，从index = 0 开始，
       * 每隔2行的rowSpan为2，其余的rowSpan为0
       */
      onCell: (_, index) => ({
        rowSpan: index % 2 === 0 || index === 0 ? 2 : 0,
      }),
    },
    {
      title: "监控指标",
      colSpan: 0,
      dataIndex: "type",
    },
    {
      title: "user1",
      dataIndex: "user1",
    },
    {
      title: "user2",
      dataIndex: "user2",
    },
    {
      title: "user3",
      dataIndex: "user3",
    },
    {
      title: "user4",
      dataIndex: "user4",
    },
  ];

在这里插入图片描述

【Demo3-codesandbox】

数据处理(整合接口返回的数据结构)

:::info
其实上部分代码已经实现了产品的基本需求，但后台不一定能给我理想的数据结构，所以需要进行数据处理
:::

假设后台返回的数据结构如下：

  • 用户数量为动态
  • 返回日期为动态
[
  {
    "name": "傅洋",
    "id": "user_0",
    "dateList": [
      {
        "date": "2022-07-01",
        "conversion_7": "55%",
        "conversion_30": "64%",
        "short_trend": "-1.975",
        "long_trend": "0.053"
      },
      {
        "date": "2022-07-02",
        "conversion_7": "82%",
        "conversion_30": "27%",
        "short_trend": "0.779",
        "long_trend": "0.353"
      }
    ]
  },
  {
    "name": "白秀英",
    "id": "user_1",
    "dateList": [
      {
        "date": "2022-07-01",
        "conversion_7": "90%",
        "conversion_30": "32%",
        "short_trend": "0.462",
        "long_trend": "-1.763"
      },
      {
        "date": "2022-07-02",
        "conversion_7": "33%",
        "conversion_30": "52%",
        "short_trend": "-1.653",
        "long_trend": "0.725"
      }
    ]
  }
]

理想数据结构变更

因为数据返回的用户/时间数量为动态,所以 定义一个对象将 用户ID 作为 key, 值作为val 。这样更灵活一些

const data = [
  {
    date: "2022-07-01",
    parentType: "conversion_monitor", // 转换监控
    type: "conversion_7", // 7日转化率
    data:{
      user1: "1%",
      user2: "3%",
      user3: "10%",
      user4: "0%",
    }
  },
  {
    date: "2022-07-01",
    parentType: "conversion_monitor", // 转换监控
    type: "conversion_30", // 30日转化率
    data:{
      user1: "1%",
      user2: "3%",
      user3: "10%",
      user4: "0%",
    }
  },
  {
    date: "2022-07-01",
    parentType: "trend_monitor", // 趋势监控
    type: "short_trend", // 短期趋势
    data:{
      user1: "-0.001",
      user2: "0.05",
      user3: "0.02",
      user4: "-0.04",
    }
  },
  {
    date: "2022-07-01",
    parentType: "trend_monitor", // 趋势监控
    type: "long_trend", // 长期趋势
    data:{
      user1: "-0.001",
      user2: "0.05",
      user3: "0.02",
      user4: "-0.04",
    }
  },
];

mock数据

使用mockjs 生成测试数据

import { Random } from "mockjs";
/**
 * 生成模拟数据
 * @param {*} personNumber  人员数量
 * @param {*} date         日期数量
 * @returns
 */
const mockData = (personNumber = 10, date = 10) =>
  new Array(personNumber).fill("").map((_, index) => ({
    name: Random.cname(),
    id: `user_${index}`,
    dateList: new Array(date).fill("").map((_, index) => ({
      date: `2022-07-${index < 9 ? `0${index + 1}` : index + 1}`,
      conversion_7: `${Random.natural(0, 100)}%`,
      conversion_30: `${Random.natural(0, 100)}%`,
      short_trend: `${Random.float(-1, 1, 3, 3)}`,
      long_trend: `${Random.float(-1, 1, 3, 3)}`,
    })),
  }));

动态获取colums

因为用户数量不定，所以动态生成 colums

const getColumns = (data) =>
    data.map((item) => ({
      title: item.name,
      dataIndex: `data.${item.name}`,
    }));

const columns = [
  {
    title: "日期",
    dataIndex: "date",
    /**
       * 每4行都是一个日期，从index = 0 开始，
       * 每隔4行的rowSpan为4，其余的rowSpan为0
       */
    onCell: (_, index) => ({
      rowSpan: index % 4 === 0 || index === 0 ? 4 : 0,
    }),
  },
  {
    title: "监控指标",
    colSpan: 2,
    dataIndex: "parentType",
    /**
       * 每2行组成了一个维度的监控指标，从index = 0 开始，
       * 每隔2行的rowSpan为2，其余的rowSpan为0
       */
    onCell: (_, index) => ({
      rowSpan: index % 2 === 0 || index === 0 ? 2 : 0,
    }),
  },
  {
    title: "监控指标",
    colSpan: 0,
    dataIndex: "type",
  },
  ...getColumns(response),
];

数据转换逻辑

  • 获取所有的日期数组
  • 日期从大到小排序
  • 通过遍历的当前日期 下 所有人员的 统计数据。每个日期生成四条记录

数据转换方法（for）

/**
 * 数据转换方法
 * @param {*} response 接口返回的数据
 */
const dataProcessing = (response) => {
  // 获取所有的日期KEy
  let dateList = [];
  // 遍历人员的所有数据
  for (let i = 0; i < response.length; i++) {
    const item = response[i];
    // 遍历人员的所有日期
    for (let j = 0; j < item.dateList.length; j++) {
      const dateItem = item.dateList[j];
      // 如果日期不存在，则添加到日期列表中
      if (!dateList.includes(dateItem.date)) {
        // 日期添加到日期列表中
        dateList.push(dateItem.date);
      }
    }
  }
  // 根据日期排序
  dateList = dateList.sort((a, b) => {
    return new Date(b).getTime() - new Date(a).getTime();
  });

  // 根据日期分组
  let data = [];
  // 遍历日期
  for (let i = 0; i < dateList.length; i++) {
    // 获取日期
    const date = dateList[i];
    // 每一个日期需要生成4个维度的监控指标
    const arr = [
      //七日转化率
      {
        date: date,
        parentType: "conversion_monitor",
        type: "conversion_7",
        data: {},
      },
      //三十日转化率
      {
        date: date,
        parentType: "conversion_monitor",
        type: "conversion_30",
        data: {},
      },
      //短期趋势
      {
        date: date,
        parentType: "trend_monitor",
        type: "short_trend",
        data: {},
      },
      //长期趋势
      {
        date: date,
        parentType: "trend_monitor",
        type: "long_trend",
        data: {},
      },
    ];
    // 遍历人员
    for (let j = 0; j < response.length; j++) {
      const item = response[j];
      // 获取当前日期的的用户数据
      const dateItemData = item.dateList.find((item) => item.date === date);
      if (dateItemData) {
        arr[0].data[item.id] = dateItemData.conversion_7;
        arr[1].data[item.id] = dateItemData.conversion_30;
        arr[2].data[item.id] = dateItemData.short_trend;
        arr[3].data[item.id] = dateItemData.long_trend;
      }
    }
    data.push(...arr);
  }
  return data;
};

【Demo4-codesandbox】

数据转换方法（es6）

/**
 * 数据转换方法
 * @param {*} response 接口返回的数据
 */
const dataProcessing = (response) =>
  response
    // 获取到出现的所有日期
    .reduce((acc, item) => {
      return acc.concat(
        item.dateList
          .map((item) => item.date)
          .filter((item) => !acc.includes(item))
      );
    }, [])
    // 日期排序 从大到小
    .sort((a, b) => new Date(b).getTime() - new Date(a).getTime())
    // 根据日期顺序生成日期列表
    .reduce((list, date) => {
      // 获取当前日期的的用户数据
      const dataSource = response.map((item) => ({
        // 将用户ID 回填到数据中
        id: item.id,
        ...(item.dateList.find((item) => item.date === date) || {}),
      }));
      // 每一个日期需要生成4个维度的监控指标
      return list.concat([
        //七日转化率
        {
          date: date,
          parentType: "conversion_monitor",
          type: "conversion_7",
          data: dataSource.reduce((data, item) => {
            data[item.id] = item.conversion_7;
            return data;
          }, {}),
        },
        //三十日转化率
        {
          date: date,
          parentType: "conversion_monitor",
          type: "conversion_30",
          data: dataSource.reduce((data, item) => {
            data[item.id] = item.conversion_30;
            return data;
          }, {}),
        },
        //短期趋势
        {
          date: date,
          parentType: "trend_monitor",
          type: "short_trend",
          data: dataSource.reduce((data, item) => {
            data[item.id] = item.short_trend;
            return data;
          }, {}),
        },
        //长期趋势
        {
          date: date,
          parentType: "trend_monitor",
          type: "long_trend",
          data: dataSource.reduce((data, item) => {
            data[item.id] = item.long_trend;
            return data;
          }, {}),
        },
      ]);
    }, []);

【Demo5-codesandbox】

最终输出

最终版本使用的是es6版本的代码，这种模式也是我常用的。至于原因就是我可以少敲两行代码

  • 增加左侧固定列
  • 增加X轴及Y轴滚动
  • 增加字典，将key转中文(ps:无il18n需求)
import { Table } from "antd";
import { Random } from "mockjs";
/**
* 生成模拟数据
* @param {*} personNumber  人员数量
* @param {*} date         日期数量
* @returns
*/
const mockData = (personNumber = 30, date = 10) =>
new Array(personNumber).fill("").map((_, index) => ({
  name: Random.cname(),
  id: `user_${index}`,
  dateList: new Array(date).fill("").map((_, index) => ({
    date: `2022-07-${index < 9 ? `0${index + 1}` : index + 1}`,
    conversion_7: `${Random.natural(0, 100)}%`,
    conversion_30: `${Random.natural(0, 100)}%`,
    short_trend: `${Random.float(-1, 1, 3, 3)}`,
    long_trend: `${Random.float(-1, 1, 3, 3)}`,
  })),
}));

/**
* 获取Columns
* @param {*} data
*/
const getColumns = (data) =>
data.map((item) => ({
  title: item.name,
  width: 80,
  dataIndex: ["data", item.id],
}));

/**
* 数据转换方法
* @param {*} response 接口返回的数据
*/
const dataProcessing = (response) =>
response
// 获取到出现的所有日期
.reduce((acc, item) => {
  return acc.concat(
    item.dateList
    .map((item) => item.date)
    .filter((item) => !acc.includes(item))
  );
}, [])
// 日期排序 从大到小
.sort((a, b) => new Date(b).getTime() - new Date(a).getTime())
// 根据日期顺序生成日期列表
.reduce((list, date) => {
  // 获取当前日期的的用户数据
  const dataSource = response.map((item) => ({
    // 将用户ID 回填到数据中
    id: item.id,
    ...(item.dateList.find((item) => item.date === date) || {}),
  }));
  // 每一个日期需要生成4个维度的监控指标
  return list.concat([
    //七日转化率
    {
      date: date,
      parentType: "conversion_monitor",
      type: "conversion_7",
      data: dataSource.reduce((data, item) => {
        data[item.id] = item.conversion_7;
        return data;
      }, {}),
    },
    //三十日转化率
    {
      date: date,
      parentType: "conversion_monitor",
      type: "conversion_30",
      data: dataSource.reduce((data, item) => {
        data[item.id] = item.conversion_30;
        return data;
      }, {}),
    },
    //短期趋势
    {
      date: date,
      parentType: "trend_monitor",
      type: "short_trend",
      data: dataSource.reduce((data, item) => {
        data[item.id] = item.short_trend;
        return data;
      }, {}),
    },
    //长期趋势
    {
      date: date,
      parentType: "trend_monitor",
      type: "long_trend",
      data: dataSource.reduce((data, item) => {
        data[item.id] = item.long_trend;
        return data;
      }, {}),
    },
  ]);
}, []);

/** 字典map */
const dictMap = {
  conversion_monitor: "转化监控",
  trend_monitor: "趋势监控",
  conversion_7: "7天转化率",
  conversion_30: "30天转化率",
  short_trend: "短期趋势",
  long_trend: "长期趋势",
};

const Demo5 = () => {
  // 生成 mock 数据
  const response = mockData();
  // 获取所有的日期KEy
  const dateList = dataProcessing(response);
  
  const columns = [
    {
      title: "日期",
      dataIndex: "date",
      width: 100,
      fixed: "left",
      /**
      * 每4行都是一个日期，从index = 0 开始，
      * 每隔4行的rowSpan为4，其余的rowSpan为0
      */
      onCell: (_, index) => ({
        rowSpan: index % 4 === 0 || index === 0 ? 4 : 0,
      }),
    },
    {
      title: "监控指标",
      colSpan: 2,
      fixed: "left",
      width: 80,
      dataIndex: "parentType",
      /**
      * 每2行组成了一个维度的监控指标，从index = 0 开始，
      * 每隔2行的rowSpan为2，其余的rowSpan为0
      */
      onCell: (_, index) => ({
        rowSpan: index % 2 === 0 || index === 0 ? 2 : 0,
      }),
      render: (text) => dictMap[text],
    },
    {
      title: "监控指标",
      colSpan: 0,
      fixed: "left",
      width: 100,
      dataIndex: "type",
      render: (text) => dictMap[text],
    },
    ...getColumns(response),
  ];
  return (
    <div>
      <h2>最终版本</h2>
      <Table
        columns={columns}
        dataSource={dateList}
        pagination={false}
        bordered
        size="small"
        scroll={{ x: 1, y: 600 }}
        ></Table>
    </div>
  );
};

export default Demo5;

【Demo6-codesandbox】

赵忠洋
关注
  • 8
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
Antd的table组件表格的序号自增操作
01-18
1，效果图 2，实现方法 const columns = [ { title: '序号', render:(text,record,index)=>`${index+1}`, }, { title:'操作', dataIndex:'delete', key:'delete', render: (text,record) => ( <Link to={{ pathname : '/info/Edit' , query : { id : record.id }}}> 删除</Link> ), },
antd表格table多行多列合并
Y_soon_start的博客
08-15 1884
antd表格table多行多列合并
ant-design table合并
最新发布
carrycarrie的博客
05-11 143
1.两列合并，三列合并。
保姆级教程 | 表格自动行合并实现
艾米栗的代码天地
08-26 1268
在 element-ui 和 antv 中都有表格合并，但如何确定哪几行要合并呢？ 在随机给定数据的情况下，如何实现自动合并呢？本文将一一解答这些问题。
antd Table 动态数据 合并单元格（合并行）
芝芝为荔枝
01-06 3510
最近处理table的时候 遇到了要合并同一列的几行的情况，比如第一列的前面三行都是同一个对象的名字，此时合并显示比较妥当，但是数据是后端接口来的，而且可以筛选条件，搜索出来的数据就是动态的长度，可能这次需要合并前面的五行， 在原有的静态数据的合并的基础上，需要加上一个合并的逻辑代码。，遇到需要合并的行，设置rowSpan的数量为需要合并的行总数，然后把后面的rowSpan设置为0（不渲染该位置），否则这个表格就会乱套。下面就是我们合并了 ‘分类’ 列下面的 【1,2】行 ，【4,5,6】 行。
前端 | 表格（table）的合并
weixin_43627723的博客
01-14 5695
开始系统学习前端啦~ 记录一下自己在学习时不够熟悉的一些点儿 表格的行/列合并 跨行合并合并的都是合并行，不跨行合并的都是和并列 不管是合并行还是和并列，合并的属性都给列td（th）设置 表格的合并不是合二为一，而是一个人占多个人的位置，把其他的内容挤出去 合并行 rowspan 和并列 colspan 举个小栗子！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> .
ant-design-vue的table表格行合并和列合并
weixin_43828487的博客
12-07 7024
ant-design-vue的表格行、列合并
antd 中 Table表格 合并行
Jenn168的博客
03-11 2210
1.首先获取所要合并行的column，去除每一行数据的rowkey，本例取的是Name这一列。 2.当Name的值在多个页面出现时需重新记录rowSpan。 3.合并column中具有相同Name的行。 结果图如下： 表格数据： const DataArr= [{ Name: '小明', age: '', oid: '1', }, ...15个一样de // oid不一样 { Name: '小明小明', age: '', oid: '17',
table表格合并行
qq_41329302的博客
10-29 694
表格合并
Ant table表格合并单元格使用
m0_54679211的博客
10-08 3874
前端，随堂笔记吧，小笔记，不喜勿喷！仅供参考学习
antd vue table跨行合并单元格,并且自定义内容实例
01-18
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
antd table按表格里的日期去排序操作
01-18
表格内容 根据票据日期升序（这里是已经排序后的效果） 上代码 代码中data的内容如下 根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的...
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
热门推荐
都随它大小便吧
05-10 1万+
有时遇到一些需求，需要实现ElementUI或ElementPlus中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。
React antd table oncell 单元格自动合并
LiYinger1的博客
10-31 1880
【代码】React antd table oncell 单元格自动合并。
Ant Design中Table表单行列合并
lydia_love的博客
07-14 9971
Ant Design中Table表单行列合并Table组件实现方法 Table组件 前几天，客户有个需求，就是把一个excel表做成一个页面，里面的行列都可能会合并。 类似这种的： 一般第一步都会先看一下ant design的文档，看看是否有相似的。最后发现是有相似的页面。像这种： 但是我当时就仅仅只关注了Table组件的colSpan这个属性，这个在这个上面是写死的，当时可能是脑子秀逗了，不...
react-antd表格合并及动态数表头处理
DT_XUE321的博客
04-18 980
antd表格合并及动态表头渲染
antd 行列合并
mengfanyue123的博客
01-20 700
const mergeCells = (text, data, key, index, recordlength) => { if (index !== 0 && text === data[index - 1][key]) { return 0; } let rowSpan = 1; for (let i = index + 1; i < data.length; i += 1) { if (text !== data..
antd table 合并列
10-21
antd table 合并列可以通过设置表格的 column 属性中的 render 函数来实现。具体步骤如下： 1. 在 column 中设置需要合并的列的 dataIndex 和 render 函数。 2. 在 render 函数中，判断当前单元格是否需要合并，如果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赵忠洋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值