ant design(Tabs,Table)配置

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


ant design(Tabs,Table)配置_第1张图片

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;

rowKey={record => record._id}           // 避免报错(key)唯一

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

 columns={columns}               

 dataSource={dataSourse}                

 size="small"                // tr的高度

pagination= {pagination}            

/>

```

ant design(Tabs,Table)配置_第2张图片
ant design(Tabs,Table)配置_第3张图片
pagination

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

4.主题样式(颜色)修改目录路径:

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

你可能感兴趣的:(ant design(Tabs,Table)配置)