首页 > 其他分享 >筛选表格后再点击上方的条目筛选,表格依然是筛选态的解决办法

筛选表格后再点击上方的条目筛选,表格依然是筛选态的解决办法

时间:2023-03-15 13:14:51浏览次数:52  
标签:hasChangeRef const 表格 条目 current false 筛选 ref

思路:
table子组件监听传入值,声明一个ref默认为false,在监听传入值的effect里,将refcurrent变成true,在表格的onchange方法内将ref变成false,在每次拿到table数据的返回值时,判断ref的值是否为true,是则遍历表头,通过表头子项的filterSearch来判断是否是筛选项,是则将该值赋为null

import { useEffect, useState, useRef } from 'react'

export default function MyTable (prop) {
    const{listenData} = prop
    const hasChangeRef = useRef(false)
 useEffect(() => {
    if (!listenData.length) return
    hasChangeRef.current = true
    getTableResource()
}, [listenData])

const getTableResource = async()=>{
   const res = await getAjax()
   const {columns} = res
         if (hasChangeRef.current) {
          columns.forEach(element => {
            if (element.filterSearch) {
              element.filteredValue = null
            }
          })
        }
//   oth...
}
return    <Table  {...tableResource}
        onChange={(pagination, filter) => {
        // 这里,将其设为false
          hasChangeRef.current = false
          getTableResource(pagination)
        }}
      />
}

大致逻辑是这样,时间太紧有的就省略了。
以上。

标签:hasChangeRef,const,表格,条目,current,false,筛选,ref
From: https://www.cnblogs.com/hjk1124/p/17218100.html

相关文章

  • 表格单元格合并
    表格单元格合并 单元格合并属性水平合并:colspan垂直合并:rowspan<tableborder="1"width=500pxheight="500px">  <tr>    <td>单元1</td>   ......
  • lodop打印 table表格分页带表头页码
    lodop.PRINT_INIT("wageSalaryRetireRecordService");varstrBodyStyle="<style>"+document.getElementById("print_style").innerHTML+"</s......
  • .NET Core 中的筛选器 Filter
    官方文档:https://docs.microsoft.com/zh-cn/aspnet/core/mvc/controllers/filters?view=aspnetcore-5.0通过使用ASP.NETCore中的筛选器,可在请求处理管道中的特定阶段之......
  • 在线电子表格12
    MVVM优点利用MVVM,很多非常复杂的前端页面编写起来就非常容易了。这得益于我们把注意力放在Model的结构上,而不怎么关心DOM的操作。本节我们演示如何利用Vue快速创建一个在线......
  • 筛选质数
     这一题的思想是这样,1,2,3,4,5,6,7,8,9,10.遍历数组,先把i的倍数全部删掉,因为如果是谁的倍数那么肯定就不是质数,把所有的倍数都删掉以后,剩下的就是质数了。比如,1肯定不是质数了,2的......
  • 7款颜色的CSS表格样式美化网页表格
    第一种:CSS表格样式之一点击查看CSS代码 /*Borderstyles*/#table-1thead,#table-1tr{border-top-width:1px;border-top-style:solid;border-top-color:......
  • 表格1
    表格1这就是表格标题标题单元格标题单元格标题单元格标题单元格标题单元格单元格1单元格1单元格1单元格1单元格1单元格2单元格2单元格2单元格2单元格2......
  • 用python编写程序,使用筛选法查找并输出小于1000的所有素数
    #创建一个布尔数组,其中的值都是True,数组下标为i表示数字i是否为素数prime=[Trueforiinrange(1000)]#0和1不是素数,因此将它们的值设置为Falseprime[0]=Falseprim......
  • C语言读写表格文件
    1.csv文件简介  逗号分隔值(Comma-SeparatedValues,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本)。纯文本意味着该文件是......
  • 表格检测识别技术的发展历程
    -引言近年来,随着计算机技术的飞速发展,越来越多的研究者开始关注表格检测识别技术。表格检测识别技术是一种利用计算机自动处理表格的技术,它可以实现从文本中检测出表格,并......