Ant Design - Table Columns中dataIndex的含义

Posted 2023-04-04

参考技术A 在Ant Design中，如果我们要使用table，可以到官网文档中查看详细的例子。
但是在例子中，你会发现类似以下的数据结构：

可以看到，数组的object中有key，dataIndex，title，render这些keys。
title以及render都好理解，title指的是thead中每个th的显示字段，render指的是用什么样的方式来显示数据（通常为一个返回ReactNode的函数）。
那么dataIndex指的是什么意思呢？

我们先来看一下官方文档怎么说：

由于英文文档解释的很潦草，这里我把中文文档中的解释也加了进去。

我们看到，假设我们dataIndex为name，那么我们在table的dataSource中指定的每一个数据中，都必须包含有name为key的对象，而显示出的数据就是相应key对应的数

假设我们的数据结构更为复杂一些，例如name: firstname: 'Eagle', lastname: 'Luo'，那么我们需要将dataIndex改为name.firstname或name.lastname来获取下一层级的数据。

结合以上例子来看，dataIndex的含义就比较明确了。需要注意的一点，如果我们已经使用了唯一的dataIndex，那么我们就不再需要给每个column加上key了。

ant design（Tabs，Table）配置

参考技术A 1.Tabs标签页默认样式修改，确保先将所有的padding和margin重置。.ant-tabs-bar设置默认的黑灰border-bottom，只需在这里将border都设为0即可。.ant-tabs.ant-tabs-card>.ant-tabs-bar .ant-tabs-tab设置了每一个tab的一些样式，通过debug调试即可。

2.table表格参数配置，可以自定义翻页，分步请求。Table中主要配置解释，column配置主要作用是将列名及列内容做一一对应，dataIndex和dataSource里面的数据值也是一一对应的关系。后面的render除了过滤转换数据同样可以return HTML。recor等价于applysPayed[i]，rowKey给每一行一个唯一key，避免报错。pagination默认为true，可以设置为false，则不会显示翻页。

```

const pagination = dataSourse && dataSourse.length > 10 ? true : false;

<Table

rowKey=record => record._id           // 避免报错（key)唯一

showHeader=false               // 不展示每一列的名称

 columns=columns               

 dataSource=dataSourse                

 size="small"                // tr的高度

pagination= pagination            

/>

```

3.Pagination参数配置，showQuickJumper带自动输入调整翻页，不传则无。其余参数是配合后台做翻页请求。

4.主题样式（颜色）修改目录路径：

/Users/yons/Desktop/task/server-commerce/node_modules/antd/lib/style/themes/default.less: