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下的下拉列表回写,赋值之后会出现更改不了值的情况,原因是我之前的赋值方式是

问题代码:

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

更改之后的代码:

javascript 复制代码
edit(row){
	//显示弹窗
	this.centerDialogVisible = true
	
	this.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) 方法

问题代码:

javascript 复制代码
 ruleForm.template_ids = row.template_id ? row.template_id.split(',') : []

正确代码:

javascript 复制代码
 <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>
javascript 复制代码
		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中表单的回写方式如下:(不是写在一起,单独排列开)

javascript 复制代码
ruleForm.title = row.title
ruleForm.teacher_id = row.teacher_id

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

相关推荐
国家不保护废物3 分钟前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js
写不来代码的草莓熊1 小时前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
JinSo1 小时前
pnpm monorepo 联调:告别 --global 参数
前端·github·代码规范
程序员码歌1 小时前
豆包Seedream4.0深度体验:p图美化与文生图创作
android·前端·后端
urhero1 小时前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序
二十雨辰1 小时前
eduAi-智能体创意平台
前端·vue.js
golang学习记2 小时前
从0死磕全栈之Next.js connection() 函数详解:强制动态渲染的正确姿势(附实战案例)
前端
郝学胜-神的一滴2 小时前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
m0dw2 小时前
vue懒加载
前端·javascript·vue.js·typescript
国家不保护废物2 小时前
手写 Vue Router,揭秘路由背后的魔法!🔮
前端·vue.js