React + TSX + Ant Design 实现表格内嵌搜索框_antd tsx-程序员宅基地

技术标签： react.js  前端框架  前端  

没有实现不了的功能 所见即所得 

要实现上面的功能也不需要有什么准备 既然都来到这里了 就说明环境上面的你已经搭建完成了 只是为了能实现功能

版本1.0 

新建问价DynamicTable.tsx 当然这里是作为组件来说的

引入所用得到的组件功能API   当前所用的antd版本为5.x ，请注意属性兼容！！！

import { Input, Table } from 'antd';
import { useCallback, useMemo, useState } from 'react';

定义组件名称 接收参数 DynamicTable （props里面的数据以及列项不确定直接写Array<any>）

dataSource:数据   columns:列项 这就简单得显示出一个表格

const DynamicTable = (props: { dataSource: Array<any>; columns: Array<any> }) => {
  const { dataSource, columns } = props
  return (
    <Table
      className="DynamicTable"
      dataSource={dataSource}
      bordered={true}
      tableLayout={'fixed'}
      columns={columns}
      pagination={
   {
        total: dataSource.length,
        showTotal: total => `共 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: [10, 50, 100, 1000]
      }}
  
    />
  )
}

export default DynamicTable

内嵌搜索框也就是添加到表格的第一行，首行。那就直接在数据上面做手脚，将搜索框input添加到数据列表中并且位于之首。dataSource[0]（仅代表个人想法，也不会有人蠢到去第二页再进行搜索）

在父组件进行使用，给父组件初始化数据  

import { useEffect, useMemo, useState } from 'react'
import DynamicTable from '../../components/DynamicTable'

const ManagePage = () => {
  const [dataSource, setdataSource] = useState<any[]>([ ])
  const [columns, setcolumns] = useState<any[]>([ ])
  useEffect(() => {
    const data = []
    for (let i = 0; i < 100; i++) {
      data.push({
        key: `${i}i`,
        name: `Edward${i} King ${i}`,
        age: `${i}32`,
        address: `L${i}ondon, Park Lane no. ${i}`,
        D: i,
        E: `New${i}DEFG`,
        F: `New${i}FGHJ`,
        G: `New${i}QWER`
      })
    }
    setdataSource([...data])
    setcolumns([
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        render: (text: any, record: any, index: number) => `${index + 1}`,
        width: 80,
        align: 'center'
      },
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        align: 'center'
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        align: 'center'
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
        align: 'center'
      },
      {
        title: 'D',
        dataIndex: 'D',
        key: 'D',
        align: 'center'
      },
      {
        title: 'E',
        dataIndex: 'E',
        key: 'E',
        align: 'center'
      },
      {
        title: 'F',
        dataIndex: 'F',
        key: 'F',
        align: 'center'
      },
      {
        title: 'G',
        dataIndex: 'G',
        key: 'G',
        align: 'center'
      }
    ])
  }, [])
  return (
    <div id="ManagePage" className="ManagePage">
      {useMemo(() => {
        return <DynamicTable dataSource={dataSource} columns={columns} />
      }, [dataSource, columns])}
    </div>
  )
}

export default ManagePage

子组件DynamicTable 接收到值，并进行处理 

 

先给获取到的数据添加唯一标识（这里我是自定义的数据，所以传过来接收到就会有key）

 现在将接收到的值赋给sliceContent 

  const sliceContent = useMemo(() => {
    const sliceContentData =
      dataSource.length > 0
        ? dataSource.map((item, index) => ({
            ...item,
            key: `${index}`
          }))
        : []
    return sliceContentData
  }, [dataSource])

定义searchText和findTitle用来存储输入框输入的值和对应的key

 const [searchText, setSearchText] = useState<string>('') 
 const [findTitle, setFindTitle] = useState<string>('key')

获取到数据中的key值，为每一个key值添加一个input输入框，然后添加到数据的最前面并且给input绑定change事件，传入两个值，一个是value，一个是key

  const inputOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>, s: string) => {
    setSearchText(e.target.value)
    setFindTitle(s)
  }, [])



 
  // 数据标题 -- 数据内容
  const dataKeys = useMemo(() => (sliceContent.length > 0 ? Object.keys(sliceContent[0]) : []), [sliceContent])

  // 定义过滤input
  const columnsInput = useMemo(() => {
    const inputColumns: any = {}

    for (let index = 0; index < dataKeys.length; index++) {
      // 将数据中的每一项赋值为input
      inputColumns[dataKeys[index]] = <Input key={dataKeys[index]} placeholder="" onChange={e => inputOnChange(e, dataKeys[index])} />
    }
    return inputColumns
  }, [dataKeys, inputOnChange])

定义完过滤框，就要将过滤框放在数据首行，这里不区分大小写 因为全部转化了

  // 数据
  const filteredData = useMemo(() => {
    if (sliceContent.length === 0) return []
    // 将数据进行处理 全部转换为string类型并且都是小写 需要区分大小写就去掉  .toLowerCase()
    const filtered = sliceContent.filter(item =>
      String(item[findTitle as keyof typeof item])
        .toLowerCase()
        .includes(searchText.toLowerCase())
    )

    // 数据的开头填入input搜索框
    filtered.unshift(columnsInput)

    // 将数据抛出
    return filtered
  }, [sliceContent, findTitle, searchText, columnsInput])

然后将表格中的数据改成filteredData就可以了，最后可以根据自己项目需求添加其他功能

完整代码：

import { Input, Table } from 'antd'
import { useCallback, useMemo, useState } from 'react'

const DynamicTable = (props: { dataSource: Array<any>; columns: Array<any> }) => {
  const { dataSource, columns } = props
  console.log('dataSource', dataSource, 'columns', columns)
  // 添加key属性 string类型
  const sliceContent = useMemo(() => {
    const sliceContentData =
      dataSource.length > 0
        ? dataSource.map((item, index) => ({
            ...item,
            key: `${index}`
          }))
        : []
    return sliceContentData
  }, [dataSource])

  const [searchText, setSearchText] = useState<string>('') // 输入框改变事件 内容
  const [findTitle, setFindTitle] = useState<string>('key') // 输入框改变事件 标题


  // 输入框change事件
  const inputOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>, s: string) => {
    setSearchText(e.target.value)
    setFindTitle(s)
  }, [])

  // 数据标题 -- 数据内容
  const dataKeys = useMemo(() =>  (sliceContent.length > 0 ? Object.keys(sliceContent[0]) : []), [sliceContent])

  // 定义过滤input
  const columnsInput = useMemo(() => {
    const inputColumns: any = {}

    for (let index = 0; index < dataKeys.length; index++) {
      // 将数据中的每一项赋值为input
      inputColumns[dataKeys[index]] = <Input key={dataKeys[index]} placeholder="" onChange={e => inputOnChange(e, dataKeys[index])} />
    }
    return inputColumns
  }, [dataKeys, inputOnChange])

  // 数据
  const filteredData = useMemo(() => {
    if (sliceContent.length === 0) return []
    // 将数据进行处理 全部转换为string类型并且都是小写 需要区分大小写就去掉  .toLowerCase()
    const filtered = sliceContent.filter(item =>
      String(item[findTitle as keyof typeof item])
        .toLowerCase()
        .includes(searchText.toLowerCase())
    )

    // 数据的开头填入input搜索框
    filtered.unshift(columnsInput)

    // 将数据抛出
    return filtered
  }, [sliceContent, findTitle, searchText, columnsInput])

  return (
    <Table
      className="DynamicTable"
      dataSource={filteredData}
      bordered={true}
      tableLayout={'fixed'}
      columns={columns}
      pagination={
   {
        total: filteredData.length,
        showTotal: total => `共 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: [10, 50, 100, 1000]
      }}
    />
  )
}

export default DynamicTable

上面代码只适合一次搜索，不支持多条件同时搜索

版本2.0

没有进行大更改，就只是改了一下搜索条件，原本是String字符串，改成了数组然后循环查找就好了

修改地方：

1.删除这两行代码

  const [searchText, setSearchText] = useState<string>('') // 输入框改变事件 内容
  const [findTitle, setFindTitle] = useState<string>('key') // 输入框改变事件 标题

用下面这一个取而代之 

  const [searchText, setSearchText] = useState<string[]>([])

2.输入框事件

  // 输入框change事件
  const inputOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>, s: string) => {
    setSearchText(e.target.value)
    setFindTitle(s)
  }, [])

修改为

  const inputOnChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>, s: string) => {
      const newSearchText = [...searchText]
      newSearchText[dataKeys.indexOf(s)] = e.target.value
      setSearchText(newSearchText)
    },
    [dataKeys, searchText]
  )

3.过滤数据方法

 // 数据
  const filteredData = useMemo(() => {
    // 将数据进行处理 全部转换为string类型并且都是小写 需要区分大小写就去掉  .toLowerCase()
    const filtered = sliceContent.filter(item =>
      String(item[findTitle as keyof typeof item])
        .toLowerCase()
        .includes(searchText.toLowerCase())
    )

    // 数据的开头填入input搜索框
    filtered.unshift(columnsInput)

    // 将数据抛出
    return filtered
  }, [sliceContent, findTitle, searchText, columnsInput])

修改为

  // 数据
  const filteredData = useMemo(() => {
    if (sliceContent.length === 0) return []
    const filtered = sliceContent.filter(item => {
      for (let i = 0; i < dataKeys.length; i++) {
        const key = dataKeys[i]
        const searchValue = searchText[i] || ''
        if (!String(item[key]).toLowerCase().includes(searchValue.toLowerCase())) {
          return false
        }
      }
      return true
    })
    filtered.unshift(columnsInput)
    return filtered
  }, [sliceContent, searchText, dataKeys, columnsInput])

完整代码：

import { Input, Table } from 'antd'
import { useCallback, useMemo, useState } from 'react'

const DynamicTable = (props: { dataSource: Array<any>; columns: Array<any> }) => {
  const { dataSource, columns } = props

  // 添加key属性 string类型
  const sliceContent = useMemo(() => {
    const sliceContentData =
      dataSource.length > 0
        ? dataSource.map((item, index) => ({
            ...item,
            key: `${index}`
          }))
        : []
    return sliceContentData
  }, [dataSource])

  const [searchText, setSearchText] = useState<string[]>([])

  // 数据标题 -- 数据内容
  const dataKeys = useMemo(() => (sliceContent.length > 0 ? Object.keys(sliceContent[0]) : []), [sliceContent])

  const inputOnChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>, s: string) => {
      const newSearchText = [...searchText]
      newSearchText[dataKeys.indexOf(s)] = e.target.value
      setSearchText(newSearchText)
    },
    [dataKeys, searchText]
  )

  // 定义过滤input
  const columnsInput = useMemo(() => {
    const inputColumns: any = {}
    for (let index = 0; index < dataKeys.length; index++) {
      // 将数据中的每一项赋值为input
      inputColumns[dataKeys[index]] = <Input  defaultValue={searchText[index]} key={dataKeys[index]} placeholder="" onChange={e => inputOnChange(e, dataKeys[index])} />
    }
    return inputColumns
  }, [dataKeys, inputOnChange])

  // 数据
  const filteredData = useMemo(() => {
    if (sliceContent.length === 0) return []
    const filtered = sliceContent.filter(item => {
      for (let i = 0; i < dataKeys.length; i++) {
        const key = dataKeys[i]
        const searchValue = searchText[i] || ''
        if (!String(item[key]).toLowerCase().includes(searchValue.toLowerCase())) {
          return false
        }
      }
      return true
    })
    filtered.unshift(columnsInput)
    return filtered
  }, [sliceContent, searchText, dataKeys, columnsInput])

  return (
    <Table
      className="DynamicTable"
      dataSource={filteredData}
      bordered={true}
      tableLayout={'fixed'}
      columns={columns}
      pagination={
   {
        total: filteredData.length,
        showTotal: total => `共 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: [10, 50, 100, 1000]
      }}
    />
  )
}

export default DynamicTable

使用中有任何报错欢迎私信询问
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58346650/article/details/131010543

智能推荐

leetcode 172. 阶乘后的零-程序员宅基地

文章浏览阅读63次。题目给定一个整数 n，返回 n! 结果尾数中零的数量。解题思路每个0都是由2 * 5得来的，相当于要求n!分解成质因子后2 * 5的数目，由于n中2的数目肯定是要大于5的数目，所以我们只需要求出n!中5的数目。C++代码class Solution {public: int trailingZeroes(int n) { ...

Day15-【Java SE进阶】IO流（一）：File、IO流概述、File文件对象的创建、字节输入输出流FileInputStream FileoutputStream、释放资源。_outputstream释放-程序员宅基地

文章浏览阅读992次，点赞27次，收藏15次。UTF-8是Unicode字符集的一种编码方案，采取可变长编码方案，共分四个长度区:1个字节，2个字节，3个字节，4个字节。文件字节输入流：每次读取多个字节到字节数组中去，返回读取的字节数量，读取完毕会返回-1。注意1:字符编码时使用的字符集，和解码时使用的字符集必须一致，否则会出现乱码。定义一个与文件一样大的字节数组，一次性读取完文件的全部字节。UTF-8字符集:汉字占3个字节，英文、数字占1个字节。GBK字符集:汉字占2个字节，英文、数字占1个字节。GBK规定:汉字的第一个字节的第一位必须是1。_outputstream释放

jeecgboot重新登录_jeecg 登录自动退出-程序员宅基地

文章浏览阅读1.8k次，点赞3次，收藏3次。解决jeecgboot每次登录进去都会弹出请重新登录问题，在utils文件下找到request.js文件注释这段代码即可_jeecg 登录自动退出

数据中心供配电系统负荷计算实例分析-程序员宅基地

文章浏览阅读3.4k次。我国目前普遍采用需要系数法和二项式系数法确定用电设备的负荷，其中需要系数法是国际上普遍采用的确定计算负荷的方法，最为简便;而二项式系数法在确定设备台数较少且各台设备容量差..._数据中心用电负荷统计变压器

HTML5期末大作业：网页制作代码 网站设计——人电影网站(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 dreamweaver作业静态HTML网页设计模板_网页设计成品百度网盘-程序员宅基地

文章浏览阅读7k次，点赞4次，收藏46次。HTML5期末大作业：网页制作代码 网站设计——人电影网站(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 dreamweaver作业静态HTML网页设计模板常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业_网页设计成品百度网盘

【Jailhouse 文章】Look Mum, no VM Exits_jailhouse sr-iov-程序员宅基地

文章浏览阅读392次。jailhouse 文章翻译，Look Mum, no VM Exits!_jailhouse sr-iov

随便推点

CSS中设置背景的7个属性及简写background注意点_background设置背景图片-程序员宅基地

文章浏览阅读5.7k次，点赞4次，收藏17次。css中背景的设置至关重要，也是一个难点，因为属性众多，对应的属性值也比较多，这里详细的列举了背景相关的7个属性及对应的属性值，并附上演示代码，后期要用的话，可以随时查看，那我们坐稳开车了······1: background-color 设置背景颜色2:background-image来设置背景图片- 语法：background-image:url(相对路径);-可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色，一般情况下设置背景..._background设置背景图片

Win10 安装系统跳过创建用户，直接启用 Administrator_windows10msoobe进程-程序员宅基地

文章浏览阅读2.6k次，点赞2次，收藏8次。Win10 安装系统跳过创建用户，直接启用 Administrator_windows10msoobe进程

PyCharm2021安装教程-程序员宅基地

文章浏览阅读10w+次，点赞653次，收藏3k次。Windows安装pycharm教程新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入下载安装PyCharm1、进入官网PyCharm的下载地址：http://www.jetbrains.com/pycharm/downl_pycharm2021

《跨境电商——速卖通搜索排名规则解析与SEO技术》一一1.1　初识速卖通的搜索引擎...-程序员宅基地

文章浏览阅读835次。本节书摘来自异步社区出版社《跨境电商——速卖通搜索排名规则解析与SEO技术》一书中的第1章，第1.1节，作者： 冯晓宁，更多章节内容可以访问云栖社区“异步社区”公众号查看。1.1　初识速卖通的搜索引擎1.1.1　初识速卖通搜索作为速卖通卖家都应该知道，速卖通经常被视为“国际版的淘宝”。那么请想一下，普通消费者在淘宝网上购买商品的时候，他的行为应该..._跨境电商 速卖通搜索排名规则解析与seo技术 pdf

SpringBoot：自定义线程池配置类-程序员宅基地

文章浏览阅读846次，点赞23次，收藏18次。有时候我们在项目中做一些长链路的跑批任务时，基于Springboot项目的定时任务，我们可以指定一个自定义的线程配置类进行单独提供给具体跑批任务使用，而不占用整个系统资源。_线程池配置类

浅谈LLAMA2核心函数generate源码_llama temperature-程序员宅基地

文章浏览阅读1.5k次。本文介绍了Temperature以及sample_top_p的原理，并且阅读了LLAMA2的核心生成函数的源码。关于更多细节实现，请关注llama源码。_llama temperature

推荐文章

热门文章

相关标签