Ant Design - Table Columns中dataIndex的含义
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ant Design - Table Columns中dataIndex的含义相关的知识,希望对你有一定的参考价值。
参考技术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:
以上是关于Ant Design - Table Columns中dataIndex的含义的主要内容,如果未能解决你的问题,请参考以下文章
Ant Design of Vue —— Table表格组件 —— 设置动态表头
React开发(230):ant design table固定表头