ant design（Tabs，Table）配置

Posted 2023-03-14

参考技术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:

Table - Ant Design - 在 Virtual table ant design 中实现过滤器

【中文标题】Table - Ant Design - 在 Virtual table ant design 中实现过滤器

【英文标题】：Table - Ant Design - Implement filter in Virtual table ant desgin

【发布时间】：2020-12-04 22:24:58

【问题描述】：

在 ant 设计的虚拟表中实现过滤器时遇到了一些麻烦。 当我在列配置上应用过滤器但不起作用时。

有没有人可以解决这个问题？

感谢您阅读本文。

【参考方案1】：

是的……

经过 5 个小时的研究，我编写了一些代码来应用它。但我对速度和性能并不满意。

关于虚拟表ant表的代码，请参见：Virtual table - Ant design

//ES6 

import React from 'react';
import _ from 'lodash';
import VirtualTable from './virtualTable';

function compareData(filters, record) 
    return new Promise((resolve, reject) => 
        let compared_result = true;
        (async () => 
            await _.each(filters, (valueFilter, keyFilter) => 
                if(valueFilter !== null && valueFilter.length !== 0) 
                    if(compared_result == true) 
                        if(_.indexOf(valueFilter, record[keyFilter]) == -1) 
                            compared_result = false
                        
                    
                
            )

            if(compared_result == true) 
                resolve(record);
            
            else 
                resolve(undefined)
            
        )();
    );


class MoreDataTable extends React.Component 
    state = 
        dataSource: [],
        dataRaw:[]
    

    constructor(props) 
        super(props);
    
        this.state.dataSource = props.dataSource;
        this.state.dataRaw = props.dataSource;
    

    handleEventChangeTableData = (pagination, filters, sorter, extra) => 
        let dataResult = [...this.state.dataRaw];
        //adding something like sorter, pagination if you want

        (async () => 
            if(_.size(filters) > 0) 

                const result = await _.map(dataResult, record => 
                    return compareData(filters, record);
                )
            
                Promise.all(result).then(value => 
                    this.setState( dataSource: _.without(value, undefined));
                )
            
        )()
    

    render() 
        const props = 
            ...this.props,
            dataSource: this.state.dataSource
        
        return (
            <VirtualTable ...props onChange=(pagination, filters, sorter, extra) => this.handleEventChangeTableData(pagination, filters, sorter, extra) />
        )
    

export default MoreDataTable;

使用组件MoreDataTable

<MoreDataTable 
dataSource=this.state.dataReport 
columns=columns
loading=true />