解决element UI select multiple多选下拉框, 赋值和传值到后台处理操作

前端使用vue,项目中使用的是element ui组件,在使用select下拉框多选时,新增记录时select多选下拉框正常使用,没问题。但是在编辑记录时,编辑界面也为select下拉框赋值了,却没有显示数据。
先放一个select多选下拉框编辑时正确的加载数据的显示效果图:

下拉框代码如下:

<el-form-item label="设备属性" prop="setId">
    <el-select v-model="dataForm.setId" multiple class="filter-item" placeholder="请选择设备属性" >
	    <el-option v-for="item in deviceTypeOptions" :key="item.deviceTypeId" :label="item.deviceTypeName" :value="item.deviceTypeId" />
	</el-select>
</el-form-item>

将后端返回的字符串在转换成数组时,转换成整形数组,下拉框即可正确显示。
代码如下:

// 显示编辑界面
handleEdit: function (row) {
	this.editDialogVisible = true
	this.operation = false 
	this.dataForm = Object.assign({}, row)
	
	var arrIntSet = []
	if(null!=row.setId&&""!=row.setId){
	    // 将字符串转换成数组,此时是字符串数组
		var arrString = row.setId.split(',')
		// 将字符串数组的每一项转换成Number,生成一个新的数组
		for (var arrInt in arrString) {
			arrIntSet.push(parseInt(arrString[arrInt]))
		}
	}
	// 将新的Number数组,绑定到select空间的v-model上
	this.dataForm.setId = arrIntSet 		
}

数据保存传值到后台,代码如下:

submitForm: function () { 
			this.$refs.dataForm.validate((valid) => {
				if (valid) { 
					this.$confirm('确认提交吗?', '提示', {}).then(() => {
						this.editLoading = true
						 
						//多选框数据处理
						let s = []
						for(var i = 0; i < this.dataForm.setId.length; i++) {
							s.push(this.dataForm.setId[i])
						}
						 
						this.dataForm.setId = s.join()

						let params = Object.assign({}, this.dataForm)						 
						saveOrUpdate(params).then((res) => {
							if(res.code == 20000) {
								this.$message({ message: '操作成功', type: 'success' })
							} else {
								this.$message({message: '操作失败, ' + res.msg, type: 'error'})
							}
							this.editLoading = false
							this.$refs['dataForm'].resetFields()
							this.editDialogVisible = false
							this.findPage()
						})
					}) 
				}
			})
		},

 

  • 7
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值