Question

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

有人对此有解决方案吗？

感谢阅读。

Answer 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} />

表-蚂蚁设计-在虚拟表ant desgin中实施过滤器

1 个答案: