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

下拉框代码如下:

 
  1. <el-form-item label="设备属性" prop="setId">

  2. <el-select v-model="dataForm.setId" multiple class="filter-item" placeholder="请选择设备属性" >

  3. <el-option v-for="item in deviceTypeOptions" :key="item.deviceTypeId" :label="item.deviceTypeName" :value="item.deviceTypeId" />

  4. </el-select>

  5. </el-form-item>

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

 
  1. // 显示编辑界面

  2. handleEdit: function (row) {

  3. this.editDialogVisible = true

  4. this.operation = false

  5. this.dataForm = Object.assign({}, row)

  6.  
  7. var arrIntSet = []

  8. if(null!=row.setId&&""!=row.setId){

  9. // 将字符串转换成数组,此时是字符串数组

  10. var arrString = row.setId.split(',')

  11. // 将字符串数组的每一项转换成Number,生成一个新的数组

  12. for (var arrInt in arrString) {

  13. arrIntSet.push(parseInt(arrString[arrInt]))

  14. }

  15. }

  16. // 将新的Number数组,绑定到select空间的v-model上

  17. this.dataForm.setId = arrIntSet

  18. }

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

 
  1. submitForm: function () {

  2. this.$refs.dataForm.validate((valid) => {

  3. if (valid) {

  4. this.$confirm('确认提交吗?', '提示', {}).then(() => {

  5. this.editLoading = true

  6.  
  7. //多选框数据处理

  8. let s = []

  9. for(var i = 0; i < this.dataForm.setId.length; i++) {

  10. s.push(this.dataForm.setId[i])

  11. }

  12.  
  13. this.dataForm.setId = s.join()

  14.  
  15. let params = Object.assign({}, this.dataForm)

  16. saveOrUpdate(params).then((res) => {

  17. if(res.code == 20000) {

  18. this.$message({ message: '操作成功', type: 'success' })

  19. } else {

  20. this.$message({message: '操作失败, ' + res.msg, type: 'error'})

  21. }

  22. this.editLoading = false

  23. this.$refs['dataForm'].resetFields()

  24. this.editDialogVisible = false

  25. this.findPage()

  26. })

  27. })

  28. }

  29. })

  30. },

 

Logo

前往低代码交流专区

更多推荐