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

【讨论】：

在 mobx 商店中更改状态时，Ant-Design Table 不呈现

】在mobx商店中更改状态时，Ant-DesignTable不呈现【英文标题】：Ant-DesignTablenotrenderingwhenchangestateinmobxstore【发布时间】：2020-09-2709:29:31【问题描述】：我对antdesignTable组件中单击一行的行为进行了编程。这应该会更改表格上的rowClas... 查看详情

ant.design.vue中table组件中的排序

参考技术A1.如果仅仅是本地排序：Column中的sorter写一个排序函数即可2.如果需要后端排序sorter设置为true然后点击排序图标就会出发table的change事件在这里调用请求数据接口即可 查看详情

翻译 Ant Design Pro Table 默认表的默认操作

】翻译AntDesignProTable默认表的默认操作【英文标题】：TranslateAntDesignProTabledefaulttable\'sdefaultoperation【发布时间】：2020-04-0815:38:52【问题描述】：有什么办法可以将AntDesignProtable的默认操作文本翻译成英文。我使用的是Umi默认组件... 查看详情

具有垂直和水平滚动的 Ant Design Table

】具有垂直和水平滚动的AntDesignTable【英文标题】：AntDesignTablewithverticalandhorizontalscroll【发布时间】：2019-08-2217:58:14【问题描述】：我正在使用AntDesignTable来显示来自公司内部API的动态数据。这意味着我不知道我会收到什么样的... 查看详情

ant-design-vuetable表格合计行的实现

参考技术A新接手的一个项目是基于ant-design-vueadmin的开发，当需求要实现类似elementUI的合计行效果时，发现提供的API不支持，然后写了这个组件，也当练基础了思路要点有另外，在实现过程中发现:showHeader="false"这个属性... 查看详情

无法对 Gatsby 网站的 Ant Design Table 中的列进行排序

】无法对Gatsby网站的AntDesignTable中的列进行排序【英文标题】：Can\'tsortColumninAntDesignTableinGatsbysite【发布时间】：2020-04-1604:21:33【问题描述】：我在Gatsby网站中实现了一个Ant设计表。我正在从graphql中提取数据。到目前为止，一切... 查看详情

ant-design-vue的a-table入门

参考技术A本来想写个详解的，一翻API，算了吧ε=(´ο｀*)))，写个入门教程吧。这样写，a-table就能简单地把数据原样渲染上去，这里有两个参数介绍一下：有时候只是把数据渲染上去还不能满足要求，比如要显示性别，后端传... 查看详情

ant-design-vue中关于table组件的使用（初级）(代码片段)

1.如何自定义表格列头：<a-table:columns="columns":dataSource="dataSource"><spanslot="customTitle"><a-icontype="smile-o"/>Name</span></a-table>constcolumns=[　　　dataIndex:‘name‘,　　　　//自定义列表头，则不能设置title属性align:‘left... 查看详情

如何在 ant-design react app 中使用 ant-design-pro 组件？

】如何在ant-designreactapp中使用ant-design-pro组件？【英文标题】：Howtouseant-design-procomponentsinant-designreactapp?【发布时间】：2019-10-2214:52:52【问题描述】：我已经使用create-react-app创建了react应用程序并使用了ant-design组件，随着项目变... 查看详情

ant-design-vue:table指定expandedrowkeys后会导致其他的折叠按钮无法展开与回缩-展开所有缩回所有和单项展开缩回并存开发

ant-design-vue有个bug：table指定expandedRowKeys后会导致其他的折叠按钮无法展开与回缩，然后我们试了defaultExpandedRowKeys也只会在首次加载起作用expandedRowKeys：展开的行，控制属性字符串数组defaultExpandedRowKeys：默认展开的行字符串数组... 查看详情

初识ant-design(代码片段)

设计价值观Ant-Design在设计方面，存在两个大的价值观，自然和确定。自然即顺其自然，在顺应用户的自我感知和行为方式来开发更自然的产品。确定即探索设计规律，并将其抽象成对象，减少设计者的主观干扰，降低系统的不... 查看详情

ant design中对dataSource执行过滤功能后获取组件表中过滤后的数据

】antdesign中对dataSource执行过滤功能后获取组件表中过滤后的数据【英文标题】：GetfiltereddataincomponenttableafterexecutingthefilterfunctionondataSourceinantdesign【发布时间】：2018-10-0900:43:52【问题描述】：在Ant-desigin中使用Table组件时，我想在... 查看详情

用ant-design在react js中提交后清除表单输入字段值

】用ant-design在reactjs中提交后清除表单输入字段值【英文标题】：Clearforminputfieldvaluesaftersubmittinginreactjswithant-design【发布时间】：2019-05-2323:24:13【问题描述】：我使用react创建了一个注册页面。在那里，我使用了以下注册表单。ht... 查看详情

ant-design-vue的一些常见用法

参考技术A        :pagination="false"//分页器配置项        childrenColumnName=""   添加row-key属性：row-key=""  使用defaultExpandAllRows不能直接... 查看详情

是否可以将图像添加到 Ant Design Tables 中的单元格表中？

】是否可以将图像添加到AntDesignTables中的单元格表中？【英文标题】：IsitpossibletoaddanimagetoacellTableinAntDesignTables?【发布时间】：2019-04-1621:13:32【问题描述】：我正在尝试创建一个列，在他的条目中将包含一张小图片和一个名字。... 查看详情

Ant Design TabPane 最小高度 100%

】AntDesignTabPane最小高度100%【英文标题】：AntDesignTabPanemin-height100%【发布时间】：2019-12-2401:44:44【问题描述】：使用Ant.Design选项卡https://ant.design/components/tabs/如何在TabPane上设置样式，使其最小高度始终为窗口的100%高度，即使它... 查看详情

Ant-Design CSS 未正确加载

】Ant-DesignCSS未正确加载【英文标题】：Ant-DesignCSSnotloadingproperly【发布时间】：2019-07-1104:24:24【问题描述】：我在使用React.js在第一次渲染时渲染我的Ant-DesignCSS时遇到问题。我有一个非常基本的页面，它只是呈现一个按钮。importR... 查看详情

如何在 Ant Design 中设置图标的大小？

】如何在AntDesign中设置图标的大小？【英文标题】：HowcanIsetthesizeoficonsinAntDesign?【发布时间】：2019-06-2416:48:03【问题描述】：所以当我在AntDesign中使用图标时，它总是14*14像素。有没有办法设置大小maual？类似的东西<Iconwidth="20... 查看详情