Блог

У меня возникли некоторые проблемы при реализации фильтра on в виртуальной таблице в дизайне ant. Когда я применяю фильтр к конфигурации столбца, но не работаю.

У кого-нибудь есть какое-то решение для этого?

Спасибо, что прочитали это.

Да…

После 5 часов исследований я написал некоторый код для применения этого. Но я не удовлетворен скоростью и производительностью.

О коде для виртуальной таблицы ant table читайте в: Дизайн виртуальной таблицы Ant

 //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 amp;amp; 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;
  

использование компонента Moredatable

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