vue2+elementUI,vue3+elementPlus解决form中的下拉列表回写显示id,不显示label

三个问题:

问题1:vue2+elementui中form下的下拉列表回写,赋值之后会出现更改不了值的情况
问题2:表单中绑定的值是v-model=‘form.father.son’ 这种多级响应不了,把这种多级改成单级 v-model=‘form.son’ 就不会出现值更改不了的情况
问题3:vue3+elementPlus 表单基础多选,回写的时候显示的是id 不是label名称,因为我的类型错误导致的

如下:

问题1:vue2+elementui中form下的下拉列表回写,赋值之后会出现更改不了值的情况,原因是我之前的赋值方式是

问题代码:

edit(row){//显示弹窗this.centerDialogVisible = true// 给表单中的输入框赋值this.form.title=row.title// 给表单中的下拉框赋值this.form.teacher_id=row.teacher_id
}

更改之后的代码:

edit(row){//显示弹窗this.centerDialogVisible = truethis.form={title:row.title,// 给表单中的输入框赋值teacher_id:row.teacher_id// 给表单中的下拉框赋值}}

问题2:表单中绑定的值是v-model=‘form.father.son’ 这种多级响应不了,把这种多级改成单级 v-model=‘form.son’ 就不会出现值更改不了的情况

问题3:vue3+elementPlus 表单基础多选,回写的时候显示的是id 不是label名称,因为我的类型错误导致的
后端给的数据是字符串类型的 1,4,3,2
在这里插入图片描述

在这里插入图片描述
但是elementplus中需要的是数字类型的数组
在这里插入图片描述
直接字符串转数组,转出来的类型是 [‘1’,‘4’,‘3’,‘2’]
需要把数组中的字符串转成数字类型 [1,4,3,2],使用.map(Number) 方法

问题代码:

 ruleForm.template_ids = row.template_id ? row.template_id.split(',') : []

正确代码:

 <el-form ref="ruleFormRef" :model="ruleForm" ><el-form-item label="选择模板:" prop=""><el-select v-model="ruleForm.template_ids" filterable multiple placeholder="请选择/输入"><el-option :label="item.template_title" :value="item.id" v-for="(item, index) in mubanArr":key="index"></el-option></el-select></el-form-item>
</el-form>
		let template_id = row.template_id.split(',') // ['1','4','3','2']let xx = template_id.map(Number) //  [1,4,3,2]ruleForm.template_ids = xx.length > 0 ? xx : [] //给表单赋值回写

vue3中表单的回写方式如下:(不是写在一起,单独排列开)

ruleForm.title = row.title
ruleForm.teacher_id = row.teacher_id

这是我自己实验出来的代码,效果是好的,如有不足或者有更好的方法,欢迎指正探讨

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

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

相关文章

机器人制作开源方案 | 棘轮小车

1. 运动功能说明 棘轮小车&#xff08;Ratchet Car&#xff09;是一种基于棘轮原理设计的小型车辆&#xff0c;它结合了棘轮机制和移动装置&#xff0c;用于特定的应用场景&#xff0c;这种设计使得小车能够实现单向移动或防止逆向移动。棘轮小车的主要特点包括&#xff1a; …

微信小程序 ——入门介绍及简单的小程序编写

14天阅读挑战赛自己决定的事情&#xff0c;就要不动声色的一往直前&#xff01; 目录 一、小程序入门 1.1 什么是小程序 1.2 小程序的优点 1.3 小程序注册 1.4 安装开发工具 1.5 创建第一个小程序 二、小程序目录结构及入门案例 2.1 目录结构 2.2 入门案例 2.2.1 创建…

Vue封装组件并发布到npm仓库

1. 环境准备 因为我们此次封装的是Vue组件&#xff0c;所以我们直接在Vue脚手架项目里面进行封装即可。 &#xff08;1&#xff09;初始化Vue项目 vue create lin-vue &#xff08;2&#xff09;运行项目 npm run serve 2. 组件封装 新建src/components文件夹 因为我们可…

pdf处理工具 Enfocus PitStop Pro 2022 中文 for mac

Enfocus PitStop Pro 2022是一款专业的PDF预检和编辑软件&#xff0c;旨在帮助用户提高生产效率、确保印刷品质量并减少错误。以下是该软件的一些特色功能&#xff1a; PDF预检。PitStop Pro可以自动检测和修复常见的PDF文件问题&#xff0c;如缺失字体、图像分辨率低、颜色空…

常用的软件项目管理工具一览

软件项目管理工具是帮助团队成功管理和完成软件开发项目的软件程序和应用程序。根据项目及其规模和复杂性&#xff0c;可以使用各种各样的这些工具来协助完成任务&#xff0c;从任务跟踪和调度&#xff0c;到项目报告&#xff0c;到版本控制和协作。 项目经理对软件项目的整体成…

CA与区块链之数字签名详解

CA与区块链验证本质上都是数字签名&#xff0c;首先&#xff0c;我们看一下什么是数字签名&#xff01; 数字签名 数字签名是公钥密码学中的一种技术&#xff0c;用于验证信息的完整性和发送者的身份。简而言之&#xff0c;数字签名是一种确认信息来源和信息完整性的手段。它通…

【面试经典150 | 哈希表】单词规律

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;哈希表 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的数据结构等内…

2023年建筑电工(建筑特殊工种)证考试题库及建筑电工(建筑特殊工种)试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年建筑电工(建筑特殊工种)证考试题库及建筑电工(建筑特殊工种)试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人…

【从零开始学习Redis | 第二篇】Redis中的数据类型和相关命令

前言&#xff1a; Redis是一种快速、高效的开源内存数据库&#xff0c;被广泛用于构建各种类型的应用程序。其被设计成支持多种数据类型&#xff0c;这使得Redis在处理各种场景的数据存储和操作中非常灵活。Redis的数据类型提供了对不同数据结构的直接支持&#xff0c;包括字符…

第18篇ESP32platformio-arduino框架-ili9488-3.5lcd显示时间天气

第18篇ESP32platformio-arduino框架-ili9488-lcd显示时间天气 第18篇esp32ili9488lcd显示时间天气 连接方法&#xff1a; 修改WIFI&#xff1a; 关键代码 void setup() {Serial.begin(115200);WiFi.mode(WIFI_STA);WiFi.begin(ssid,password);Serial.print("\r\nConnect…

Java设计模式:Callback

介绍 回调&#xff08;Callback&#xff09;是一种设计模式&#xff0c;在这种模式中&#xff0c;一个可执行的代码被作为参数传递给其他代码&#xff0c;接收方的代码可以在适当的时候调用它。 在真实世界的例子中&#xff0c;当我们需要在任务完成时被通知时&#xff0c;我…

Qt工具开发,该不该跳槽?

Qt工具开发&#xff0c;该不该跳槽? 就这样吧&#xff0c;我怕你跳不动。 嵌入式UI&#xff0c;目前趋势是向着LVGL发展。QT已经在淘汰期了。很多项目还在用&#xff0c;但技术上已经落后。QT短期内不会全面淘汰&#xff0c;但退位让贤的大趋势已经很清楚了。 最近很多小伙伴…

springboot 志同道合交友网站演示

springboot 志同道合交友网站演示 liu1113625581

百度开放平台第三方代小程序开发,授权事件、消息与事件通知总结

大家好&#xff0c;我是小悟 关于百度开放平台第三方代小程序开发的两个事件接收推送通知&#xff0c;是开放平台代小程序实现业务的重要功能。 授权事件推送和消息与事件推送类型都以event的值判断。 授权事件推送通知 授权事件推送包括&#xff1a;推送票据、授权成功、取…

排序算法-希尔排序法(ShellSort)

排序算法-希尔排序法&#xff08;ShellSort&#xff09; 1、说明 我们知道当原始记录的键值大部分已排好序的情况下插入排序法非常有效&#xff0c;因为它不需要执行太多的数据搬移操作。希尔排序法是D.L.Shell在1959年7月发明的一种排序法&#xff0c;可以减少插入排序法中数…

微信小程序入门

目录 一.微信小程序简介 二. 什么是小程序&#xff1f; 三.小程序商城项目案例 四.小程序之入门案例 json配置 wxml模板 wxss样式 js逻辑交互 测试结果 一.微信小程序简介 微信小程序是一种运行在微信客户端内的应用程序&#xff0c;它以小巧、轻量、便捷的特点受到广…

androidx.appcompat.widget.Toolbar最右边设置控件不能仅靠最右边

androidx.appcompat.widget.Toolbar最右边设置控件不能仅靠最右边 Android Toolbar左、中、右对齐-CSDN博客&#xfeff;&#xfeff;Android Toolbar左、中、右对齐默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是&#xff0c;Android Toolbar为自身的…

推荐几款简单易用的协作化项目管理工具

您是否正在寻找一种有效且简单的项目管理工具来帮助您与团队成员协作?项目管理工具在当今的商业世界中已经变得必不可少&#xff0c;因为它们帮助团队保持组织和生产力。找到合适的工具是困难的&#xff0c;因为有太多的选择。有些工具是为特定类型的项目设计的&#xff0c;而…

腾讯云国际站-阿里云OSS如何迁移到腾讯云COS?腾讯云cos迁移教程

下面小编将介绍当源对象存储部署在阿里云国际版OSS 时&#xff0c;如何配置全托管迁移任务和半托管迁移任务&#xff0c;实现顺利迁移数据至腾讯云国际版COS。 准备工作 阿里云对象存储 OSS 创建 RAM 子账号并授予相关权限&#xff1a; 登录 RAM 控制台。选择人员管理 > …

二分查找:如何用最省内存的方式实现快速查找功能?

文章来源于极客时间前google工程师−王争专栏。 有序数据集合的查找算法&#xff1a;二分查找(Binary Search)算法&#xff0c;也叫折半查找算法。二分查找的思想非常简单&#xff0c;但是难掌握好&#xff0c;灵活运用更加困难。 问题&#xff1a;假设有1000万个整数数据&…