美文网首页
ant design(Tabs,Table)配置

ant design(Tabs,Table)配置

作者: danihay | 来源:发表于2017-09-12 22:16 被阅读2440次

    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}            

    />

    ```

    pagination

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

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

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

    相关文章

      网友评论

          本文标题:ant design(Tabs,Table)配置

          本文链接:https://www.haomeiwen.com/subject/lpphsxtx.html