前端el-select 单选和多选

el-select单选

<el-form-item label="部门名称" prop="departId"><el-select v-model="dataForm.departId" placeholder="请选择" clearable:style='{ "width": "100%" }' :multiple="false" filterable :allow-create="true"@change="departIdChange"><el-option v-for="(item, index) in departIdOptions" :key="index" :label="item.fullName":value="item.id"></el-option></el-select>
</el-form-item>

 :multiple="false"  表示不能多选只能单选

//部门名称赋值departIdChange(val) {let obj = {};obj = this.departIdOptions.find((item) => {return item.id === val;});this.dataForm.departName = obj.fullName;},
departIdOptions: [{id: '国网上海超高压公司运检部', fullName: '国网上海超高压公司运检部'},{id: '变电运维中心', fullName: '变电运维中心'},{id: '变电检修中心', fullName: '变电检修中心'},{id: '输电运检中心', fullName: '输电运检中心'},{id: '智能运检管控中心', fullName: '智能运检管控中心'},],

el-select多选

<el-col :span="11"><el-form-item label="责任部门" prop="dutyDepartId"><el-select v-model="dataForm.dutyDepartId" placeholder="请选择" clearable:style='{ "width": "100%" }' :multiple="true" filterable :allow-create="true"@change="dutyDepartIdChange"><el-option v-for="(item, index) in departIdOptions" :key="index" :label="item.fullName":value="item.id"></el-option></el-select></el-form-item>
</el-col>

:multiple="true" 表示允许多选 

在提交按钮中,因为有多选,所以需要对传到后端的数据进行处理        

<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"> 确 定</el-button>dataFormSubmit() {this.$refs['elForm'].validate((valid) => {if (valid) {this.request()}})
},request() {var _data = this.dataList()
}/*** 数据格式化,将提交的表单数据转为JSON对象*/dataList() {var _data = JSON.parse(JSON.stringify(this.dataForm));let dutyDepartId = ""let arr = _data['dutyDepartId']dutyDepartId = arr.join(', ')_data['dutyDepartId'] = dutyDepartIdreturn _data;},

多选比单选多出来的操作:就是在编辑的时候,也需要通过 “,” 隔开     

 <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>addOrUpdateHandle(id, isDetail) {this.formVisible = truethis.$nextTick(() => {this.$refs.JNPFForm.init(id, isDetail)})},

 

init(id, isDetail) {this.$nextTick(() => {if (this.dataForm.id) {this.loading = true//加载表单数据getListToEdit(this.dataForm.id).then(res => {this.dataInfo(res.data)this.loading = false})} });},dataInfo(dataAll) {let _dataAll = dataAll_dataAll['dutyDepartId'] = _dataAll['dutyDepartId'].split("、")this.dataForm = _dataAll},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/97092.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

接口自动化测试框架(pytest+allure+aiohttp+ 用例自动生成)

近期准备优先做接口测试的覆盖&#xff0c;为此需要开发一个测试框架&#xff0c;经过思考&#xff0c;这次依然想做点儿不一样的东西。 接口测试是比较讲究效率的&#xff0c;测试人员会希望很快能得到结果反馈&#xff0c;然而接口的数量一般都很多&#xff0c;而且会越来越…

【ARM CoreLink 系列 5 -- CI-700 控制器介绍 】

文章目录 1.1 什么是 CI-700?1.1.1 关于 CI-7001.1.2 CI-700 特点1.2 全局配置参数1.2.1 寻址能力1.3 组件和配置1.3.1 CI-700 互联的结构1.3.2 Crosspoint(XP)1.3.3 外部接口1.4 组件(Components)1.1 什么是 CI-700? CI-700是一种AMBA 5 CHI互连,具有可定制的网状拓扑结构…

<HarmonyOS第一课>ArkTS开发语言介绍——闯关习题及答案

判断题 1.循环渲染ForEach可以从数据源中迭代获取数据&#xff0c;并为每个数组项创建相应的组件。&#xff08; 对 &#xff09; 2.Link变量不能在组件内部进行初始化。&#xff08; 对 &#xff09; 单选题 1.用哪一种装饰器修饰的struct表示该结构体具有组件化能力&#…

Maven 下载安装配置

Maven 下载安装配置 下载 maven maven 官网&#xff1a;https://maven.apache.org/ maven 下载页面&#xff1a;https://maven.apache.org/download.cgi 安装 maven 将下载的apache-maven.zip文件解压到安装目录 将加压后的apache-maven目录改名为maven maven 配置环…

Kafka 高可用

正文 一、高可用的由来 1.1 为何需要Replication 在Kafka在0.8以前的版本中&#xff0c;是没有Replication的&#xff0c;一旦某一个Broker宕机&#xff0c;则其上所有的Partition数据都不可被消费&#xff0c;这与Kafka数据持久性及Delivery Guarantee的设计目标相悖。同时Pr…

threejs 透明贴图,模型透明,白边

问题 使用Threejs加载模型时&#xff0c;模型出现了上面的问题。模型边缘部分白边&#xff0c;或者模型出现透明问题。 原因 出现这种问题是模型制作时使用了透明贴图。threejs无法直接处理贴图。 解决 场景一 模型有多个贴图时&#xff08;一个透贴和其他贴图&#xff0…

笔记01:随机过程——随机游动

一、伯努利随机过程 1. n次伯努利实验中&#xff08;x1&#xff09;发生的总次数Yn&#xff1a; (二项分布) 2. 伯努利实验中事件第一次发生的时间L1&#xff1a; &#xff08;几何分布&#xff09; 3. n次伯努利实验中事件第k次发生的时间Lk&#xff1a; &#xff08;帕斯卡分…

list的模拟实现

全部代码 #pragma once namespace HQJ {template<class T>struct __list_node//节点类{T __data;__list_node<T>* __prev;__list_node<T>* __next;__list_node(const T& x T())//由于不知道要存储的数据类型&#xff0c;使用匿名对象进行初始化:__data…

HiveServer2 Service Crashes(hiveServer2 服务崩溃)

Troubleshooting Hive | 5.9.x | Cloudera Documentation 原因&#xff1a;别人用的都好好的&#xff0c;我的集群为什么会崩溃&#xff1f; 1.hive分区表太多(这里没有说具体数量。) 2.并发连接太多&#xff0c;我记的以前默认是200个连接 3.复杂的hive查询访问表的的分区…

(一)实现一个简易版IoC容器【手撸Spring】

一、前言 相信大家在看本篇文章的时候&#xff0c;对IoC应该有一个比较清晰的理解&#xff0c;我在这里再重新描述下&#xff1a;它的作用就是实现一个容器将一个个的Bean&#xff08;这里的Bean可以是一个Java的业务对象&#xff0c;也可以是一个配置对象&#xff09;统一管理…

JetPack系列:001-JetPack概要介绍

文章目录 1. 概念介绍2. 主要内容2.1 框架库2.2 UI界面库 3. 核心思想4. 内容总结 本章回是一起Talk AndroidJetpack吧专栏的第一章回&#xff0c;本章回中主要介绍JetPack的基本概念和编程思想&#xff0c;同时也会介绍它的基础知识。闲话休提&#xff0c;请我们一起Talk Andr…

趣味工具箱小程序源码

趣味工具箱小程序源码&#xff0c;支持功能去水印&#xff0c;精选壁纸&#xff0c;图片压缩&#xff0c;文字生成二维码&#xff0c;图片加水印&#xff0c;模拟来电&#xff0c;手持弹幕&#xff0c;掷骰子…等 使用小工具&#xff0c;一个小程序有几十个功能。 源码下载&am…

面试打底稿⑥ 项目一的第二部分

简历原文 抽查部分 计算运费模块板块扩展性优化&#xff0c;采用责任链模式&#xff0c;实现不同地区间寄件的运费模板扩展的优化&#xff0c;为模块解耦&#xff0c;提高了系统的扩展性 短信模块设计&#xff0c;设计了短信发送数据模板的数据化存储&#xff0c;规范了发送短…

uniapp微信小程序蓝牙连接与设备数据对接

蓝牙连接并通信方法封装大致步骤。 初始化蓝牙并搜索&#xff1b;获取并启用service服务&#xff1b;数据读取和监听设备返回数据 需要使用uniapp官方提供api&#xff1a; // 关闭蓝牙 uni.closeBluetoothAdapter({}) // 打开蓝牙 uni.openBluetoothAdapter({}) // 搜索附近…

服务器or虚拟机安装SSH和虚拟机or服务器设置远程服务权限

第一步 服务器/虚拟机安装SSH工具,这是外部SSH终端连接服务器/虚拟机的第一步! sudo apt update && sudo apt upgrade#更新apt sudo apt install openssh-server#安装SSH工具 service ssh status#查看SSh运行状态 sudo systemctl enable --now ssh#运行SSH工具第二步…

Pytorch-学习记录-1-Tensor

1. 张量 (Tensor): 数学中指的是多维数组&#xff1b; torch.Tensor data: 被封装的 Tensor dtype: 张量的数据类型 shape: 张量的形状 device: 张量所在的设备&#xff0c;GPU/CPU requires_grad: 指示是否需要计算梯度 grad: data 的梯度 grad_fn: 创建 Tensor 的 Functio…

Google Cloud dataflow streaming job简介

简单介绍 首先 gcp 的dataflow 是1个ETL 组件, 它是基于Apache beam的 Apache beam 是1个较新的开源ETL 框架。 对于我们常用的ETL tool Spring batch 有下面的区别 spring batch 更偏向batch &#xff08;后台处理&#xff09;的ETL&#xff0c; 而apache beam 同时支持bat…

[python 刷题] 3 Longest Substring Without Repeating Characters

[python 刷题] 3 Longest Substring Without Repeating Characters 题目&#xff1a; Given a string s, find the length of the longest substring without repeating characters. 这到提要求找的是最长的&#xff0c;没有重复符号的子字符串 解题思路是用双指针哈希表&…

mysql MVCC(多版本并发控制)理解

最近看MVCC相关资料&#xff0c;这边做一个记录总结&#xff0c;方便后续理解。 目录 一、MVCC相关概念 二、MVCC实现原理 1.隐藏字段 2.undo log 3.Read View 4.MVCC的整体处理流程 5. RC&#xff0c;RR级级别下的innoDB快照读有什么不同 6.总结 一、MVCC相关概念 1…

华为云云耀云服务器L实例评测|部署私有网盘 Nextcloud

华为云云耀云服务器L实例评测&#xff5c;部署私有网盘 Nextcloud 一、云耀云服务器L实例介绍1.1 云服务器介绍1.2 产品规格1.3 应用场景 二、云耀云服务器L实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 Nextcloud3.1 Nextcloud 介绍3.2 Docker 环境搭建3.3 Nex…