Antd的table筛选,表头columns的filters过滤清空

Antd的table筛选,表头columns的filters过滤清空Form+Table实现了自定义筛选菜单的功能。具体可以参考https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel。但是此功能会有bug:选择相应的搜索条件后,点击“搜索”按钮,Table会渲染相应的数据,且Table表头也有自带的过滤功能(实际上是column的filters属性起的作用);然后再点击“清除”按钮,所有的搜索条件和表头里filters过滤的条件都要被清除。但是Ta.

大家好,又见面了,我是你们的朋友全栈君。

Form +Table 实现了自定义筛选菜单的功能。具体可以参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel

但是此功能会有bug:

选择相应的搜索条件后,点击“搜索”按钮,Table 会渲染相应的数据,且Table 表头也有自带的过滤功能(实际上是column的filters属性起的作用);然后再点击“清除”按钮,所有的搜索条件和表头里filters过滤的条件都要被清除。但是 Table 组件表头column里的过滤条件未清空。导致重新发起请求时,table列表展示的仍然是上次带了filters的筛选条件,并没有清空。

解决方案:filteredValue。具体API参考:https://2x.ant.design/components/table-cn/

具体源码:

// 初始化state:filteredInfo

const [filteredInfo, setFilteredInfo] = useState(null);

// columns: 赋属性filteredValue

const columns = [{
  title: 'Cluster',
  dataIndex: 'clusterName',
  ...getColumnSearchProps('clusterName'),
},
{
  title: 'App',
  dataIndex: 'appId',
  ...getColumnSearchProps('appId'),
},
{
  title: 'Namespace',
  dataIndex: 'nameSpaceName',
  ...getColumnSearchProps('nameSpaceName'),
},
{
  title: 'Key',
  dataIndex: 'key',
  ...getColumnSearchProps('key'),
},{
  title: 'Value',
  dataIndex: 'value',
  width: '500px',
  ...getColumnSearchProps('value'),
}];

const getColumnSearchProps = (dataIndex: any) => ({
   filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, filters }) => {
       return (
          <div style={
   
   { padding: 8 }}>
            <Input
              ref={searchInputRef}
              placeholder={`Search ${dataIndex}`}
              value={selectedKeys && selectedKeys[0]}
              onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
              onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
              style={
   
   { width: 188, marginBottom: 8, display: 'block' }}
            />
            <div style={
   
   {display: 'flex', flexDirection: 'row', justifyContent: 'center'}}>
              <Button
                type="primary"
                onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
                icon="search"
                size="small"
                style={
   
   { width: 70, marginRight: 15 }}
              >
                确认
              </Button>
              <Button onClick={() => handleReset(clearFilters)} size="small" style={
   
   { width: 70 }}>
                清空
              </Button>
            </div>
          </div>
        )},
    filterIcon: filtered => <Icon type="search" style={
   
   { color: filtered ? '#1890ff' : undefined }}  />,
    onFilter: (value, record) => record[dataIndex] ?record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
            : '',
        onFilterDropdownVisibleChange: visible => {
          if (visible) {
            setTimeout(() => ((searchInputRef as any).current as any).select(), 100);
          }
        },
        filteredValue: filteredInfo && filteredInfo[dataIndex],
        render: text =>
          searchedColumn === dataIndex ? (
            <Highlighter
              highlightStyle={
   
   { backgroundColor: '#ffc069', padding: 0 }}
              searchWords={[searchText]}
              autoEscape
              textToHighlight={text ? text.toString() : ''}
            />
          ) : (
            text
          ),
      });

// Table: 添加onChange事件,并赋值给filteredInfo

<Table
  onChange={tableChange}
  columns={columns}
  dataSource={dataSource}
  pagination={false}
  rowKey={(recode, index) => index.toFixed()}
  bordered
/>

const tableChange = ({ current: pageNum, pageSize }, filters) => {
  console.log('filters', filters);
  setFilteredInfo(filters);
}

// 查询按钮:setFilteredInfo(null)

const handleSubmit = (e: any) => {
  e.preventDefault();
  props.form.validateFields(async (err, values) => {
     if (err) {
       return err
     }
     const { key, value, haveLike } = values;
     if (key || value) {
       getApolloListFunc(key, value, haveLike);
       setFilteredInfo(null);
     } else {
        message.warning('key和value中至少得填写一项查询')
     }
   })
}

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143433.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SSM框架实现用户查询、注册、登录——IDEA整合Spring、Spring MVC、Mybatis 框架「建议收藏」

    SSM框架实现用户查询、注册、登录——IDEA整合Spring、Spring MVC、Mybatis 框架「建议收藏」目录零、前言一、说明1、整合说明2、最终目标3、数据库准备二、搭建整合环境1、创建maven工程2、导入依赖坐标3、创建java和resources文件夹4、创建类和接口文件【1】创建存放javabean类文件:cn.star.domain.Users【2】创建数据访问层UsersDao接口:cn.star.dao.UsersDao…

  • linux 大总结[通俗易懂]

    linux 大总结[通俗易懂]1.Linux介绍Linux内核最初只是由芬兰人林纳斯·托瓦兹(LinusTorvalds)在赫尔辛基大学上学时出于个人爱好而编写的。Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。Linux能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承Unix以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。目前市面上较

  • Hi3516DV300开发板——2.uboot、kernel、fs文件系统烧写

    Hi3516DV300开发板——2.uboot、kernel、fs文件系统烧写前言搭建环境教程:Hi3516DV300开发板——1.环境搭建此教程默认环境:Win10+VMware+Ubuntu18.04这篇文章只针对使用Windows下使用网口进行烧录,所以需要有一根网线和一根串口线直连电脑。不要问为什么不用串口,因为我之前串口烧录了2个小时还没成功,最后网口1分半钟烧录成功,至于官方提供的vscode,对serialport太不好装了,果断放弃。百度云过期可以留邮箱发需要哪个@@@@烧写准备1.安装USB转串口的驱动程序链接:USB-to-SerialC

  • vs2012ultimate密钥_visual studio 2012产品密钥

    vs2012ultimate密钥_visual studio 2012产品密钥VisualStudioExpress2012forWindowsDesktopKEY:MMVJ9-FKY74-W449Y-RB79G-8GJGJMicrosoftVisualStudioExpress2012forWebKEY:VX3VY-8GCVT-KJQCY-RQ99X-MCF2RVisualStudioExpress

    2022年10月14日
  • Landsat 8 地表反射率数据介绍—— Landsat 8 Surface Reflectance Tier 1

    Landsat 8 地表反射率数据介绍—— Landsat 8 Surface Reflectance Tier 1USGSLandsat8SurfaceReflectanceTier1该数据集是来自Landsat8OLI/TIRS传感器的经大气校正的表面反射率。图像包含4个可见光和一个近红外(VNIR)波段和2个短波红外(SWIR)波段两个热红外。经过正射校正后的表面反射率,以及2个热红外经过正交校正后的亮度温度这些数据已使用LaSRC进行了大气校正,包括使用CFMASK生成的云,阴影…

  • matlab归一化方法,数据归一化的基本方法

    matlab归一化方法,数据归一化的基本方法1.线性归一化简单公式表达:y=(x-minValue)/(maxValue-minValue)其中,x是归一化之前的数据,y是归一化之后的数据,maxValue和minValue分别对应这一组数据中的最大值和最小值。范围:[0,1]。适用于:把原来数据等比例缩放限定在某一范围内,在不涉及距离度量和协方差计算的时候使用。2.标准差归一化简单公式表达:y=(x-μ)/σ其中,…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号