antdesign 表格合并

最新推荐文章于 2024-05-21 14:35:19 发布

紫微前端

最新推荐文章于 2024-05-21 14:35:19 发布

阅读量782

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识加深文章标签： javascript

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/111934480

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

在使用AntDesign表格时，如何正确处理index的迷惑性问题。通过在数据中添加一个flag属性，当flag为真时执行特定的合并操作，提高表格展示的灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这样一看 index 具有很大迷惑性

应该在每行数据中插入一个属性例如flag 当flag为true时执行某些操作

 columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text, row, index) => {
      if (row.flag) {
        return <a>{text}</a>;
      }
      return {
        children: <a>{text}</a>,
        props: {
          colSpan: 5,
        },
      };
    },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    render: renderContent,
  },