antd中Tree组件使用方法个人笔记

一、前言

最近在自己自学前端,不清楚学习路线,只能盯着公司的前端项目硬看。

公司的前端项目是react框架,Ant Design Pro。

之前刚把router.config.js的逻辑理顺,目前准备开发个简单的前端页面。

在此总结下antd中<Tree>组件的使用方法。

antd组件官网api如下:

https://3x.ant.design/components/tree-cn/

二、个人笔记

1.首先,项目中有一个页面用到了<Tree>组件,展示样例如下:
在这里插入图片描述
2.以本人项目为例,这个页面的入口是http://localhost:8001/MyPage/Mylist,这个url会在router.config.js里配置,映射到页面文件;

      {
        path: '/MyPage',
        name: 'MyPage',
        routes: [
          {
            path: '/MyPage/Mylist',
            name: 'Mylist',
            component: './Mylist/index',
          },
        ],
      }

页面文件路径为...\项目名\src\pages\Mylist\index.jsx

3....\项目名\src\pages\Mylist\index.jsx这个文件中,有这样的一段:

import Home from './home';

  getView = () => {
    let result = <Home />;
    return result;
  };

  render() {
    return <div>{this.getView()}</div>;
  }

这样,页面就会显示...\项目名\src\pages\Mylist\home.jsx这个文件里的内容。

4....\项目名\src\pages\Mylist\home.jsx这个文件中,有这样的一段:

import { Card, Col, Input, Row, Tree, Spin } from 'antd';

  render() {
    const { TrainSet } = this.props;
    const { treeData, expandedKeys, autoExpandParent, selectedKeys } = TrainSet;

    return (
                  <Tree
                    onExpand={this.onExpand}
                    onSelect={this.onSelect}
                    expandedKeys={expandedKeys}
                    selectedKeys={selectedKeys}
                    autoExpandParent={autoExpandParent}
                    treeData={treeData}
                  />
    );
  }

这段的意思是,用antd的框架方法中引入Tree,然后下面就可以使用<Tree>组件了;
然后取到const treeData = this.props.TrainSet.treeData,在treeData={treeData}这里显示,就可以让页面展示出树形结构的内容了。
需要注意,<Tree>标签里的内容,都是框架里固定的名字,treeData的内容就是页面树结构展示的内容;详细用法可以看官网。

5.const treeData的内容,是这样取到的:

(1)首先,...\项目名\src\pages\Mylist\home.jsx这个文件中,有这样的一段:

  //页面加载完后会调用这个方法
  componentDidMount() {
    this.onRefesh();
  }

  onRefesh = () => {
    const { dispatch } = this.props;

    // 树的内容,给后端发请求获得返回值
    dispatch({
      type: 'TrainSet/fetchTreeNodes',
      queryPara: {},
      callback: resp => {
        this.generateList(resp);
        dispatch({
          type: 'OnlineTrainSet/initSearchSet',
          searchSet: searchSetList,
        });

      },
    });
  };

这段,先获得到const dispatch = this.props.dispatch方法,然后使用这个方法,给后台发请求。

(2)其中,type: 'TrainSet/fetchTreeNodes'的意思是,有个文件...项目名\src\pages\Mylist\models\TrainSet.js,这个文件中有个fetchTreeNodes方法,这个dispatch就会调用这个方法。

(3)fetchTreeNodes方法代码如下:

    *fetchTreeNodes({ queryPara, callback }, { call, put }) {
      const response = yield call(services.post, '/api/treenodes', queryPara);
      if (response) {
        yield put({
          type: 'updateTreeData',
          treeData: response,
          queryPara,
        });
        if (callback) callback(response);
      }
    },

这个方法就会给后台发post请求,请求的url为./api/treenodes(前缀有配置,例如http://localhost:8001/api/treenodes,这里先不找哪里配置前缀了);

如果收到了后台响应报文,就会执行yield put({ type: 'updateTreeData', treeData: response, queryPara, });这个方法,这个方法就会把返回报文response放到this.props.TrainSet.treeData里面,后续使用const treeData = this.props.TrainSet.treeData就可以把返回值response拿到了。

需要注意,this.props.TrainSet的意思是,页面叫TrainSet.js;而这个页面里把response用put方法放入treeData里了,所以用this.props.TrainSet.treeData就可以拿到response了。

6.回到这个代码, <Tree onExpand={this.onExpand} onSelect={this.onSelect} expandedKeys={expandedKeys} selectedKeys={selectedKeys} autoExpandParent={autoExpandParent} treeData={treeData} />,其中treeData={treeData}用到的就是后端返回给前端的报文,内容样例如下 :

[
    {
        "title": "A",
        "label": null,
        "value": "6",
        "key": "128",
        "param1": null,
        "param2": null,
        "param3": null,
        "param4": null,
        "param5": null,
        "param6": null,
        "param7": null,
        "param8": null,
        "param9": null,
        "pvalue": null,
        "text": null,
        "type": null,
        "disabled": false,
        "state": null,
        "children": [
            {
                "title": "A_A",
                "label": null,
                "value": "60",
                "key": "130",
                "param1": null,
                "param2": null,
                "param3": null,
                "param4": null,
                "param5": null,
                "param6": null,
                "param7": null,
                "param8": null,
                "param9": null,
                "pvalue": null,
                "text": null,
                "type": null,
                "disabled": false,
                "state": null,
                "children": [
                    {
                        "title": "A_A_A",
                        "label": null,
                        "value": "601",
                        "key": "132",
                        "param1": null,
                        "param2": null,
                        "param3": null,
                        "param4": null,
                        "param5": null,
                        "param6": null,
                        "param7": null,
                        "param8": null,
                        "param9": null,
                        "pvalue": null,
                        "text": null,
                        "type": null,
                        "disabled": false,
                        "state": null,
                        "children": []
                    },
                    {
                        "title": "A_A_B",
                        "label": null,
                        "value": "600",
                        "key": "134",
                        "param1": null,
                        "param2": null,
                        "param3": null,
                        "param4": null,
                        "param5": null,
                        "param6": null,
                        "param7": null,
                        "param8": null,
                        "param9": null,
                        "pvalue": null,
                        "text": null,
                        "type": null,
                        "disabled": false,
                        "state": null,
                        "children": []
                    }
                ]
            },
            {
                "title": "A_B",
                "label": null,
                "value": "61",
                "key": "281",
                "param1": null,
                "param2": null,
                "param3": null,
                "param4": null,
                "param5": null,
                "param6": null,
                "param7": null,
                "param8": null,
                "param9": null,
                "pvalue": null,
                "text": null,
                "type": null,
                "disabled": false,
                "state": null,
                "children": [
                    {
                        "title": "A_B_A",
                        "label": null,
                        "value": "611",
                        "key": "282",
                        "param1": null,
                        "param2": null,
                        "param3": null,
                        "param4": null,
                        "param5": null,
                        "param6": null,
                        "param7": null,
                        "param8": null,
                        "param9": null,
                        "pvalue": null,
                        "text": null,
                        "type": null,
                        "disabled": false,
                        "state": null,
                        "children": []
                    },
                    {
                        "title": "A_B_B",
                        "label": null,
                        "value": "610",
                        "key": "283",
                        "param1": null,
                        "param2": null,
                        "param3": null,
                        "param4": null,
                        "param5": null,
                        "param6": null,
                        "param7": null,
                        "param8": null,
                        "param9": null,
                        "pvalue": null,
                        "text": null,
                        "type": null,
                        "disabled": false,
                        "state": null,
                        "children": []
                    }
                ]
            }
        ]
    },
    {
        "title": "B",
        "label": null,
        "value": "n",
        "key": "339",
        "param1": null,
        "param2": null,
        "param3": null,
        "param4": null,
        "param5": null,
        "param6": null,
        "param7": null,
        "param8": null,
        "param9": null,
        "pvalue": null,
        "text": null,
        "type": null,
        "disabled": false,
        "state": null,
        "children": [
            {
                "title": "B_A",
                "label": null,
                "value": "n0",
                "key": "340",
                "param1": null,
                "param2": null,
                "param3": null,
                "param4": null,
                "param5": null,
                "param6": null,
                "param7": null,
                "param8": null,
                "param9": null,
                "pvalue": null,
                "text": null,
                "type": null,
                "disabled": false,
                "state": null,
                "children": [
                    {
                        "title": "B_A_A",
                        "label": null,
                        "value": "n01",
                        "key": "341",
                        "param1": null,
                        "param2": null,
                        "param3": null,
                        "param4": null,
                        "param5": null,
                        "param6": null,
                        "param7": null,
                        "param8": null,
                        "param9": null,
                        "pvalue": null,
                        "text": null,
                        "type": null,
                        "disabled": false,
                        "state": null,
                        "children": [
                            {
                                "title": "B_A_A_A",
                                "label": null,
                                "value": "n010",
                                "key": "343",
                                "param1": null,
                                "param2": null,
                                "param3": null,
                                "param4": null,
                                "param5": null,
                                "param6": null,
                                "param7": null,
                                "param8": null,
                                "param9": null,
                                "pvalue": null,
                                "text": null,
                                "type": null,
                                "disabled": false,
                                "state": null,
                                "children": []
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

注意,这段json就是树形结构的,key是固定的;具体规则可以查看官方文档。(因为<Tree>组件是框架里的组件,所以后台返回的json报文需要是固定的才行)

7.到此,页面就可以显示树形结构了。

三、其它备注

1.antd中有许多组件,需要查看官网了解使用方法。
2.react项目由于大部分都是js,所以页面加载比vue快些。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在Vue3使用Antd Tree组件时,使用`expandedKeys`属性来控制展开或折叠节点时,需要注意以下几点: 1. `expandedKeys`是一个双向绑定的属性,需要使用`.sync`修饰符来实现双向绑定。 2. 收起节点时,需要在`onExpand`事件更新`expandedKeys`数组的值,同时需要使用`.sync`修饰符将更新后的`expandedKeys`数组传递给Tree组件的`expandedKeys`属性。 以下是一个示例代码段,用于收起key为`node1`的节点: ``` <template> <a-tree :expanded-keys.sync="expandedKeys" :on-expand="handleExpand"> <a-tree-node key="node1" title="Node 1"> <a-tree-node key="node1-1" title="Node 1-1"></a-tree-node> <a-tree-node key="node1-2" title="Node 1-2"></a-tree-node> </a-tree-node> <a-tree-node key="node2" title="Node 2"></a-tree-node> </a-tree> </template> <script> import { defineComponent, reactive } from 'vue'; export default defineComponent({ setup() { const state = reactive({ expandedKeys: ['node1'], }); const handleExpand = (expandedKeys) => { state.expandedKeys = expandedKeys; }; return { ...state, handleExpand, }; }, }); </script> ``` 在上面的代码,我们使用了Vue3的响应式数据(reactive)来定义了一个名为`state`的状态对象,其包含了一个名为`expandedKeys`的数组,用于控制树的展开状态。我们将`expandedKeys`数组传递给Tree组件的`expanded-keys`属性,并使用`.sync`修饰符实现双向绑定。在`on-expand`事件,我们更新了`expandedKeys`数组的值,并使用`.sync`修饰符将更新后的`expandedKeys`数组传递给Tree组件的`expanded-keys`属性。 当我们点击节点时,会触发`on-expand`事件,并在事件处理函数更新`expandedKeys`数组的值。如果该节点的key已经在`expandedKeys`数组,我们就从该数组移除该节点的key,从而收起该节点。如果该节点的key不在`expandedKeys`数组,我们就将该节点的key添加到`expandedKeys`数组,从而展开该节点。最后,我们将更新后的`expandedKeys`数组传递给Tree组件的`expanded-keys`属性,实现双向绑定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

追逐梦想永不停

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值