antd-tree组件带搜索框的使用及踩坑（只标红）

最新推荐文章于 2024-05-29 17:12:06 发布
最新推荐文章于 2024-05-29 17:12:06 发布
阅读量2.4k 收藏 3
点赞数 1
分类专栏： react-antd React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44058725/article/details/115406046
版权

前言：

最近再用Tree组件做项目，记录一下使用方法。

一、预期的效果

 antd-tree带搜索框的示例（官网）：官网只是标红

我预期的效果是搜索并且标红（官网示例）。下面是我参考官网的示例写出来的。

二、antd-tree组件带搜索框的使用及踩坑（只标红）

import React, { Component } from 'react';
import { Tree, Input } from 'antd';
import styles from '../../assets/index.css';
const { TreeNode } = Tree;
const { Search } = Input;
class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [
                {
                    title: "十三中学",
                    key: 1,
                    children: [
                        {
                            title: "初一年级",
                            key: 2,
                            children: [
                                {
                                    title: "一班",
                                    key: 3,
                                },
                                {
                                    title: "二班",
                                    key: 4,
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 20,
                        }
                    ]
                },
                {
                    title: "八十中学",
                    key: 5,
                    children: [
                        {
                            title: "初一年级",
                            key: 6,
                            children: [
                                {
                                    title: "一班",
                                    key: 7,
                                    children: [

                                    ]
                                },
                                {
                                    title: "二班",
                                    key: 8,
                                    children: [
                                        {
                                            title: "一组",
                                            key: 9,
                                            children: []
                                        },
                                        {
                                            title: "vv组",
                                            key: 999,
                                            children: []
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            title: "初二年级",
                            key: 55,
                            children: []
                        }
                    ]
                }
            ],
            expandedKeys: [], //展开的key值
            autoExpandParent: true,
            checkedKeys: [], //选中的key,
            searchValue: '',
            searchTreeKey: [] //搜索得key
        }
    }
    //给子级添加父级Key
    addParentKeyWrapper = (tree) => {
        //深度克隆
        const data = JSON.parse(JSON.stringify(tree));
        function addParentKey(data, parentKey) {
            data.forEach(ele => {
                const { children, key } = ele;
                ele.parent_key = parentKey;
                if (children) {//如果唯一标识不是code可以自行改变
                    addParentKey(children, key)
                }
            })
        }
        addParentKey(data, null); //一开始为null,根节点没有父级
        return data;
    }
    componentDidMount() {
        this.expandedKeysFn();

        this.setState({
            data: this.addParentKeyWrapper(this.state.data) //调用添加父元素key
        })
    }
    onChange = (e) => { //search变化
        const { value } = e.target;
        console.log(value)
        const dataList = [];
        if (value) {
            const generateList = data => { //tree树片扁平化
                for (let i = 0; i < data.length; i++) {
                    const node = data[i];
                    const { key, title, parent_key } = node;
                    dataList.push({ key, title: title, parent_key: parent_key }); //根据自己的数据更换parent_key代表父级key
                    if (node.children) {
                        generateList(node.children);
                    }
                }
            };
            generateList(this.state.data);

            const getParentKey = (key, tree) => { //获取父元素可以
                let parentKey;
                for (let i = 0; i < tree.length; i++) {
                    const node = tree[i];
                    if (node.children) {
                        if (node.children.some(item => item.key === key)) {
                            parentKey = node.key;
                        } else if (getParentKey(key, node.children)) {
                            parentKey = getParentKey(key, node.children);
                        }
                    }
                }
                return parentKey;
            };
           
            const expandedKeys = dataList
                .map(item => {
                    if (item.title.indexOf(value) > -1) {
                        return getParentKey(item.key, this.state.data);
                    }
                    return null;
                })
                .filter((item, i, self) => item && self.indexOf(item) === i);
        
            this.setState({
                expandedKeys: expandedKeys,
                searchValue: value,
                autoExpandParent: true
            })
        } else {
            this.expandedKeysFn() //重置展开key
            this.setState({
                searchValue: value,
                autoExpandParent: true
            })
        }
    }
    renderTreeNode = (data) => { //生成树结构函数
        if (data.length == 0) {
            return
        }
       let {searchValue}=this.state;
        return data.map((item) => {
            const index = item.title.indexOf(searchValue);
            const beforeStr = item.title.substr(0, index);
            const afterStr = item.title.substr(index + searchValue.length);
            const title =
                index > -1 ? (
                    <span>
                        {beforeStr}
                        <span style={{ color: "red" }}>{searchValue}</span>
                        {afterStr}
                    </span>
                ) : (
                    <span>{item.title}</span>
                );
            if (item.children && item.children.length > 0) {
                //className={searchTreeKey.indexOf(item.key) > -1 ? styles.yes : styles.no}
                return <TreeNode  title={title} key={item.key} >
                    {
                        this.renderTreeNode(item.children)
                    }
                </TreeNode>
            }
            return <TreeNode key={item.key} title={title}  ></TreeNode>
        })
    }
    expandedKeysFn = () => {
        let { data } = this.state;
        let arr = [];
        let loop = (data) => {
            data.map((item, index) => {
                arr.push(item.key);
                if (item.children && item.children.length > 0) {
                    loop(item.children)
                }
            })
        }
        loop(data);
        this.setState({
            expandedKeys: arr
        })
    }
    onExpand = expandedKeys => {
        console.log('onExpand', expandedKeys);
        this.setState({
            expandedKeys,
            autoExpandParent: false
        });
    };
    onCheck = (checkedKeys) => {
        this.setState({ checkedKeys })
    }
    render() {
        let { data, expandedKeys, autoExpandParent, checkedKeys } = this.state;
        return (
            <div>
                <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
                <Tree
                    checkable
                    expandedKeys={expandedKeys} //默认展开的key
                    onExpand={this.onExpand} //展开事件
                    autoExpandParent={autoExpandParent} //是否自动展开父节点
                    checkedKeys={checkedKeys} //选中的key
                    onCheck={this.onCheck} //选中事件
                >
                    {this.renderTreeNode(data)}
                </Tree>
            </div>
        );
    }
}

export default Index

index.css 

.yes{
   
    display: block;
}
.no{
    display: none;
}

hook语法

import React, { Component, useEffect, useState } from 'react';
import { Tree, Input } from 'antd';
import styles from '../../assets/index.css';
const { TreeNode } = Tree;
const { Search } = Input;



function Index(props) {
    let arr = [
        {
            title: "十三中学",
            key: 1,
            children: [
                {
                    title: "初一年级",
                    key: 2,
                    children: [
                        {
                            title: "一班",
                            key: 3,
                        },
                        {
                            title: "二班",
                            key: 4,
                        }
                    ]
                },
                {
                    title: "初二年级",
                    key: 20,
                }
            ]
        },
        {
            title: "八十中学",
            key: 5,
            children: [
                {
                    title: "初一年级",
                    key: 6,
                    children: [
                        {
                            title: "一班",
                            key: 7,
                            children: [

                            ]
                        },
                        {
                            title: "二班",
                            key: 8,
                            children: [
                                {
                                    title: "一组",
                                    key: 9,
                                    children: []
                                },
                                {
                                    title: "vv组",
                                    key: 999,
                                    children: []
                                }
                            ]
                        }
                    ]
                },
                {
                    title: "初二年级",
                    key: 55,
                    children: []
                }
            ]
        }
    ]
    const [data, setData] = useState(arr); // 树形 数据
    const [expandedKeys, setExpandedKeys] = useState([]); // 展开的key值
    const [autoExpandParent, setAutoExpandParent] = useState(true); // 是否自动展开父节点
    const [checkedKeys, setCheckedKeys] = useState([]); // 选中的key
    const [searchValue, setSearchValue] = useState(""); // 搜索的值
    const [searchTreeKey, setSearchTreeKey] = useState([]); // 搜索得key

    
    useEffect(()=>{
        expandedKeysFn();
        setData(addParentKeyWrapper(data));
    },[])
    const addParentKeyWrapper = (tree) => {
        //深度克隆
        const data = JSON.parse(JSON.stringify(tree));
        function addParentKey(data, parentKey) {
            data.forEach(ele => {
                const { children, key } = ele;
                ele.parent_key = parentKey;
                if (children) {//如果唯一标识不是code可以自行改变
                    addParentKey(children, key)
                }
            })
        }
        addParentKey(data, null); //一开始为null,根节点没有父级
        return data;
    }

    const onChange = (e) => { //search变化
        const { value } = e.target;
        console.log(value)
        const dataList = [];
        if (value) {
            const generateList = data => { //tree树片扁平化
                for (let i = 0; i < data.length; i++) {
                    const node = data[i];
                    const { key, title, parent_key } = node;
                    dataList.push({ key, title: title, parent_key: parent_key }); //根据自己的数据更换parent_key代表父级key
                    if (node.children) {
                        generateList(node.children);
                    }
                }
            };
            generateList(data);

            const getParentKey = (key, tree) => { //获取父元素可以
                let parentKey;
                for (let i = 0; i < tree.length; i++) {
                    const node = tree[i];
                    if (node.children) {
                        if (node.children.some(item => item.key === key)) {
                            parentKey = node.key;
                        } else if (getParentKey(key, node.children)) {
                            parentKey = getParentKey(key, node.children);
                        }
                    }
                }
                return parentKey;
            };

            const expandedKeys = dataList
                .map(item => {
                    if (item.title.indexOf(value) > -1) {
                        return getParentKey(item.key, data);
                    }
                    return null;
                })
                .filter((item, i, self) => item && self.indexOf(item) === i);

            setExpandedKeys(expandedKeys);
            setSearchValue(value);
            setAutoExpandParent(true);
        } else {
            expandedKeysFn() //重置展开key
            setSearchValue(value);
            setAutoExpandParent(true);
        }
    }


    const renderTreeNode = (data) => { //生成树结构函数
        if (data.length == 0) {
            return
        }
        
        return data.map((item) => {
            const index = item.title.indexOf(searchValue);
            const beforeStr = item.title.substr(0, index);
            const afterStr = item.title.substr(index + searchValue.length);
            const title =
                index > -1 ? (
                    <span>
                        {beforeStr}
                        <span style={{ color: "red" }}>{searchValue}</span>
                        {afterStr}
                    </span>
                ) : (
                    <span>{item.title}</span>
                );
            if (item.children && item.children.length > 0) {
                //className={searchTreeKey.indexOf(item.key) > -1 ? styles.yes : styles.no}
                return <TreeNode title={title} key={item.key} >
                    {
                        renderTreeNode(item.children)
                    }
                </TreeNode>
            }
            return <TreeNode key={item.key} title={title}  ></TreeNode>
        })
    }
    const expandedKeysFn = () => {
        let arr = [];
        let loop = (data) => {
            data.map((item, index) => {
                arr.push(item.key);
                if (item.children && item.children.length > 0) {
                    loop(item.children)
                }
            })
        }
        loop(data);
        setExpandedKeys(arr);
       
    }
   const onExpand = expandedKeys => {
        console.log('onExpand', expandedKeys);
        setExpandedKeys(expandedKeys);
        setAutoExpandParent(false);
    };
   const onCheck = (checkedKeys) => {
        setCheckedKeys(checkedKeys);
    }

    return (
        <div>
            <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={onChange} />
            <Tree
                checkable
                expandedKeys={expandedKeys} //默认展开的key
                onExpand={onExpand} //展开事件
                autoExpandParent={autoExpandParent} //是否自动展开父节点
                checkedKeys={checkedKeys} //选中的key
                onCheck={onCheck} //选中事件
            >
                {renderTreeNode(data)}
            </Tree>
        </div>
    )
}

export default Index

 

 数据量大造成的卡顿

可以给Tree加一个height属性：使用 height 属性则切换为虚拟滚动。

<Tree height={500}/>

这样可以缓解卡顿现象

antd tree虚拟滚动

总结：

 如果想要antd-tree组件带搜索框的使用及踩坑（只保留搜索的内容并且标红）可以看这篇

 我自己实现的Tree带搜索antd Tree 组件 带搜索 

如果想要react-antd Tree(树形组件)默认展开和选中踩坑及使用可以看这篇

崽崽的谷雨
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
antd-tree.zip
07-24
antd-tree.zip 文件是一个包含使用ANT Design（简称antd）框架中的Tree组件的项目压缩包。antd是基于React的UI库，提供了丰富的组件供开发者构建前端应用。在这个项目中，重点是实现Tree组件的选择控制，以及选中...
antd-mobile-rn:一个基于 Ant Design Mobile RN 的 UI 组件库
05-23
@sishuguojixuefu/antd-mobile-rn 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。通知新版本3.x已经重构完成并发布，安装升级请查看特性基于 Ant Design 移动设计规范。规则化的视觉样式配置，...
react使用antdesign的table警告
liuxi_happy的博客
11-04 210
使用antdesign的table组件有时候会在开发者工具里面看到一个报错， Waring: Each child in a list should have a unique "key" prop. 只需要在Table标签中配置rowKey属性 <Table columns={columns} dataSource={data} rowKey={(reacord)=>reacord.id}(这个必须是唯一的标识) /> 如果你的Tabe中每一行数据没有唯一的标识你可以用下标
ReactNative Tried to register two views with the same name RNCViewPager
兔狲超凶的博客
07-14 6525
前言：ViewPager重复引用的两个错误 错误1：Tried to register two views with the same name "RNCViewPager" 错误2：Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager. 接下来是解决问题的流程 run-android报错如下： Tried to register two views with t.
Vue+AntDesignVue实现a-tree树形组件的层级全选选中功能
最新发布
xu1912715645的博客
05-29 492
Vue+AntDesignVue实现a-tree树形组件的层级选中功能
react-antd Table警告（Each record in dataSource of table should have a unique `key` prop...）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
04-29 5367
​ 1.设置rowKey属性，也未设置columns属性的配置中第一列的key（react所需） Warning: Each record in dataSource of table should have a unique `key` prop, or set `rowKey` to an unique primary key Warning:[antd:Table] Each record in dataSource of table should have a unique `key` pro
ant-design-react报错Each child in a list should have a unique “key“ prop...
熊米
01-21 265
报错如下： 解决方法：添加row-key={columns => columns.id || columns.index}，如下：
Vue3 + Ant Design Vue 可搜索 自定义字段 a-tree
Wannaer的博客
11-15 1997
实现自定义字段需要使用Tree props的 replaceFields 属性。
antd Tree组件 搜索标红 例子
09-09
antd 的Tree组件带搜索，搜索内容标红
antd-DatePicker组件获取时间值,及相关设置方式
01-21
DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。 import moment from “moment”; import “moment/locale/zh-cn” format属性，设置日期的格式，如“2020-02-28”。 设置日期 选择日期是...
antd-mobile-plus:基于antd-mobile @ 2的业务组件
03-25
这是一个使用antd-mobile @ 3中的规范，从新规划的基础antd-mobile @ 2组件的基础上开发的业务组件。 其中包含了一些约定和规范，任何参加此项目维护的朋友，都必须保持一下约定，如果你也需要基于antd-mobile @ 2...
AntD-tree组件使用详析
qq_45799465的博客
02-17 6875
一、selectedKeys与onSelect。 二、expandedKeys与onExpand。 三、loadedKeys与onLoad和onExpand。 四、loadData。 五、树节点局部节点刷新。 六、递归获取与修改数据
Antd的Transfer树穿梭框(支持搜索和全选)
开发笔记
02-09 2174
antd二级树穿梭框，支持搜索，支持全选
Antd tree树结构 数据多情况下 加载慢的 解决办法
在人生道路上谦让三分，就能天宽地阔。
11-08 5506
antd tree 树结构数据异步加载 这是我的一个数据格式，可以拿去用 然后再去根据自己的去修改 { "data": [{ "childrenList": [{ "childrenList": [], "id": 100001, "name": "javascript标签注入", "pId": 1, "type": "2" }, { "childrenList": [], "id": 200001, "name": "目标2", "pId
antd 使用Tree遇见的几个问题
热门推荐
萝卜园
05-23 1万+
注：此内容是笔者在业务中自己遇到的问题，不具有广泛性，请谨慎参考 1.defaultExpandedKeys （defaultxxxxxxxx）等 只会在第一次有，应使用expandedKeys 2.TreeNode添加dataRef 获取子节点数据； eg: 3.key ke值应该唯一（antd 常识） 4.expandedKeys 设置此参数后，目录的小三...
antd table 树形数据展示 搜索子数据 展开父节点并高亮搜索出来的数据
https://github.com/lisy999?tab=repositories
02-07 908
【代码】antd table 树形数据展示 搜索子数据 展开父节点并高亮搜索出来的数据。
antd design 表格树形数据 筛选修改
我迷了鹿
06-15 2056
由于antd design表格提供的筛选方法只能筛选顶级父节点数据，不适用搜索子节点需求，故对筛选方法做如下调整（主要修改onFilter方法，部分yinnr） import React, { Fragment } from 'react'; import { connect } from 'dva'; import { Button, Card, Col, Form, Input, Drawer, Row, Radio, Table, TreeSelect,
Reac版本的Ant Design树形控件的使用、搜索关键字标红、只显示搜索匹配中的数据
weixin_41308436的博客
12-14 1461
实现效果（需求）： 思路方法： 先去antd官网看看有没有满足需求的轮子，避免重复造轮子 拷贝数据，删掉没匹配中的数据，当搜索关键字为空时再还原数据 通过样式隐藏没匹配上的子节点 代码实现 const loop: any = (data: TreeObj[]) => { return ( data?.map((item: TreeObj) => { if (item) { const index = item.title.index
antd-datepicker组件获取时间值,及相关设置方式
09-05
antd-datepicker是Ant Design中提供的日期选择器组件，可用于选择日期和时间值。获取时间值的方式有以下几种： 1. 使用onChange事件：在DatePicker组件上绑定onChange事件，当用户选择了日期或时间时，会触发该事件并将选择的时间值作为参数传递给回调函数。可以通过e.target.value来获取选择的时间值。 ```jsx <DatePicker onChange={handleDateChange} /> ``` ```jsx const handleDateChange = (value) => { console.log(value); // 可以对选择的时间值进行相关处理 } ``` 2. 使用moment.js库：Ant Design的DatePicker组件默认返回的是Moment.js对象，可以使用该库提供的方法来获取和处理时间值。 ```jsx import moment from 'moment'; <DatePicker onChange={handleDateChange} /> ``` ```jsx const handleDateChange = (value) => { const selectedValue = moment(value).format('YYYY-MM-DD'); console.log(selectedValue); // 可以对选择的时间值进行相关处理 } ``` 相关设置方式包括： 1. 默认时间值：可以通过设置defaultValue属性来指定DatePicker组件的默认时间值。 ```jsx <DatePicker defaultValue={moment('2022-01-01', 'YYYY-MM-DD')} /> ``` 2. 可选时间范围：可以通过设置disabledDate属性来限制可选的时间范围。该属性接收一个函数，根据函数的返回值来控制禁用的日期。 ```jsx <DatePicker disabledDate={disabledDate} /> ``` ```jsx const disabledDate = (current) => { // 返回true表示禁用该日期 return current && current < moment().endOf('day'); } ``` 3. 时间格式：可以通过设置format属性来指定DatePicker组件的时间格式。 ```jsx <DatePicker format="YYYY-MM-DD HH:mm:ss" /> ``` 以上就是antd-datepicker组件获取时间值及相关设置方式的介绍。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

崽崽的谷雨

漫漫前端路，摸爬滚打

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值