根据树状数据渲染树状下拉选项

最终的效果类似这样：

作者是把非末级的选项给禁用了，如果你们需求是要不禁用求留意笔者渲染时的操作。

接下来我们一起来做这个效果：

笔者所用的是react + antd，用其他的架构也是类似，请自行举一反三：

一：首先要处理从后端拿到的数据：

处理成类似这种结构：

上面数据的关键点笔者已经指出来了，我们来渲染树状选择框就是要根据以上关键点递归渲染。

根据数据递归渲染选择框：

import React, { Component } from 'react';
import { TreeSelect } from 'antd';    //从antd引入treeselect组件
/* ··引入你其他的依赖·· */const { TreeNode } = TreeSelect;export default class Test extends Component {constructor(props) {super(props);this.state = {assetLocationList: [],}}async componentDidMount() {await this.getAssetLocationList();}getAssetLocation = async () => {/* 从后端获取数据并进行处理而后更改state的assetLocationList */}//递归渲染节点genTreeNode = event => {if (!event.isLeaf && event.children) {return (<TreeNodevalue={event.value}title={event.name}key={event.value}disabled={!event.isLeaf}      //如果你的需求不需要禁用非末级请把此行代码删掉>{event.children.map(item => this.genTreeNode(item))}</TreeNode>);} else {return (<TreeNodevalue={event.value}title={event.name}key={event.value}disabled={!event.isLeaf}       //如果你的需求不需要禁用非末级请把此行代码删掉/>);}}render() {const { assetLocationList } = this.state;return (<div><TreeSelectstyle={{ width: 130 }}dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}allowClearonChange={() => /* 当选择更改时你要进行的事件 */}>{assetLocationList.map(item => {if (!item.isLeaf && event.children) {return this.genTreeNode(item);} else {return (<TreeNodevalue={item.value}title={item.name}key={item.value}    //找个唯一标识作为节点的key/>)}})}</TreeSelect></div>)}
}

这样我们的需求就完成了哈~ 恭喜 ~

根据树状数据渲染树状下拉选项相关推荐

如何设置测试用例通过与否的表格下拉选项
前言,最近写测试用例的时候,执行结果的下拉选项以前都是模板设置好了的格式,直接下拉就可以了,但是有一次填写了内容就没办法通过下拉来复制格式,(下拉复制会把内容一样复制过来,仅格式又不行) 于是决定自 ...
layui 渲染select下拉选项，日期控件的用法
最近项目中用到关于layui的前端技术,在使用layui 渲染select option下拉复选框时出现了没有值渲染的问题,还有使用layui日期的过程 ,接下来就一起看看吧. /** *从后台渲染 ...
LayUi数据表格数据太多导致下拉框卡顿问题
LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格(详见官网) 根据官网示例做出数据表格示例根据官网表格展示在layui官网数据表格示例中 https://www.layui.c ...
layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
layui嵌套下拉框实用方法(附效果图) 在做项目时遇到一个问题,在layui 的数据表格table里面如何做一个下拉框呢?效果图如下: 这样的效果想必是最理想的了思路分析: 我们可以通过layui ...
解决layui数据表格中嵌套下拉框显示问题
在layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了. 如图, 下拉框 ...
php利用表格敬将所选择的数据显示出来,单元格下拉筛选设置/Excel对筛选后的单元格进行下拉填充...
EXCEL里怎样让一个单元格能有下拉菜单? 要设置下拉菜单的单元格(或格区)----数据---有效---"允许"中选择"序"---"来源"中 ...
bootstrap-select下拉选项数据超长换行显示
bootstrap-select version:1.13.2 在集成bootstrap-select的时候,项目中有些下拉选项文字超长,然后展示出来的效果就是这样的:看都看得出来,这样很影响用户体验 ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
html option ajax,Ajax实现简单下拉选项效果【推荐】
基本都是固定步骤!主要在JAVASCRIPT和PHP中的操作 1.HTML代码里就只有两个SELECT标签如下: 请选择请选择 2.Javascript中进行创建选项和执行AJAX异步请求步骤如下 ...

根据树状数据渲染树状下拉选项

最终的效果类似这样：

接下来我们一起来做这个效果：

一：首先要处理从后端拿到的数据：

根据数据递归渲染选择框：

根据树状数据渲染树状下拉选项相关推荐

最新文章

热门文章