react通过下拉框选择多个,并展示在下方的方式

news/2024/11/17 0:06:27/

以备后用,直接上代码:

一、方法:

//查询学校一级部门列表async orgFirstLevelList() {let data = {schoolId:this.state.schoolId};let depList = await orgFirstLevelList(data);this.setState({depList: depList})}//删除所选部门deleteDep(index) {let {selectDepList} = this.state;selectDepList.splice(index,1);this.setState({ selectDepList });}//添加所选部门addDep(e) {let orgName = null;let { depList,selectDepList} = this.state;//判断已添加列表中是否已存在for(let i = 0;i < selectDepList.length; ++i){if(selectDepList[i].id === e[0]) {this.mesWarning('该部门已添加过了,无需重复添加')return;}}for(let i = 0;i < depList.length; ++i){if(depList[i].id === e[0]) {orgName = depList[i].orgName;break;}}selectDepList.push({id:e[0], orgName:orgName});this.setState({ selectDepList: selectDepList});this.props.form.setFieldsValue({orgId:""})}

二、form及选择展示

<Form.Item label="所属部门">
{getFieldDecorator('depId', {rules: [{required: true,message: '请输入所属组织',},]})(<CascaderfieldNames={{label: 'orgName', value: 'id'}}options={depList}placeholder="请选择所属组织,支持多选"changeOnSelectonChange={(e) => this.addDep(e)}disabled={this.state.isLook}getPopupContainer={triggerNode => triggerNode.parentNode || document.body}/>)}
</Form.Item>{selectDepList.length > 0?<Col span={24}><div className="diyTag">{selectDepList.map((item,index)=>{return(<Tag key={index} id={item.id}>{item.orgName}<span onClick={() => this.deleteDep(index)}>{closeBtn}</span></Tag>)})}</div></Col>:""
}


http://www.ppmy.cn/news/1531367.html

相关文章

OpenHarmony(鸿蒙南向)——平台驱动指南【I2C】

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ 持续更新中…… 概述 功能简介 I2C&#xff08;Inter Integrated Circuit&#x…

小川科技携手阿里云数据库MongoDB:数据赋能企业构建年轻娱乐生态

随着信息技术的飞速发展&#xff0c;企业在处理海量数据时所面临的挑战日益严峻。特别是在年轻娱乐领域&#xff0c;用户行为的多样性和数据量的激增对数据存储与分析技术提出了更高的要求。在此背景下&#xff0c;小川凭借其前瞻性的技术视野&#xff0c;选择了MongoDB作为其数…

低代码中实现数据映射的必要性与方案

在数字化转型的浪潮中&#xff0c;低代码平台因其快速开发和灵活性而受到越来越多企业的青睐。然而&#xff0c;随着业务需求的复杂化&#xff0c;单纯依赖低代码工具往往难以满足企业在数据处理和业务逻辑上的要求。数据映射作为连接不同数据源和业务逻辑的桥梁&#xff0c;显…

Vue3教程 - 1 Vue简介

更好的阅读体验&#xff1a;点这里 &#xff08; www.foooor.com &#xff09; 1 Vue简介 Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程…

Spring5入门

Spring5 课程&#xff1a;3、IOC理论推导_哔哩哔哩_bilibili 文档&#xff1a;狂神SSM教程- 专栏 -KuangStudy 一.Spring概述 1.介绍 Spring : 春天 —->给软件行业带来了春天2002年&#xff0c;Rod Jahnson首次推出了Spring框架雏形interface21框架。2004年3月24日&…

深度学习后门攻击分析与实现(二)

前言 在本系列的第一部分中&#xff0c;我们已经掌握了深度学习中的后门攻击的特点以及基础的攻击方式&#xff0c;现在我们在第二部分中首先来学习深度学习后门攻击在传统网络空间安全中的应用。然后再来分析与实现一些颇具特点的深度学习后门攻击方式。 深度学习与网络空间…

vue3中使用echarts折线图初始化只显示一条数据,其余折线根据用户点击进行显示

vue3中使用echarts折线图初始化只显示一条折线&#xff0c;其余折线根据用户点击进行显示 1、主要是在图例属性中去配置selected属性&#xff0c;将刚开始需要展示的折线设置为true&#xff0c;其余设置为false selected: {"云存储": false,"云胶片": fa…

Windows系统上安装JDK

在Windows系统上安装JDK&#xff08;Java Development Kit&#xff09;的步骤如下&#xff1a; 下载JDK&#xff1a; 访问Oracle官方网站或其他JDK提供商&#xff08;如AdoptOpenJDK、Amazon Corretto等&#xff09;的网站。选择适合你需求的JDK版本&#xff08;例如&#xff0…