reactjs - Table - Ant Design - 在 Virtual table ant 设计中实现过滤器

Question

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

有没有人对此有一些解决方案？

感谢您阅读本文。

标签： reactjsantd

Answer 1

是的...

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

关于虚拟表ant table的代码，请参见：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} />