解决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()
-
})
-
})
-
}
-
})
-
},
更多推荐
所有评论(0)