博客

一、问题描述

项目上使用Vue+elementUI-select多选下拉框做数据编辑时，数据回显成功，但是无法对回显成功数据进行操作。

• 代码片段：

<template>
 <el-form-item label="标签：" prop="values">
          <el-select
            v-model="form.values"
            multiple
            placeholder="请选择标签"
            @change="change"
            style="width: 100%;"
          >
            <el-option
              v-for="label of labelList"
              :key="label.code"
              :label="label.name"
              :value="label.code"
            />
          </el-select>
        </el-form-item>
</template>
<script>
export default {
	data() {
	    return {
	    	 form: {
        		values: []
       		 }
	    }
	},
	method: {
		change(event, item) {
	      console.log(event)
	    },
		// 获取编辑数据
    	editForm(data) {
    	this.form = JSON.parse(data)
		this.form.values = this.form.tagCode.substr(1, this.form.tagCode.length - 2)
        .replace(/\s+/g, '')
        .split(',')
        console.log(this.form.values)
		}
	}
}	
</script>

• 控制台打印的this.form.values的值：
  
  
• 使用select提供的
  
change

  方法监听this.form.values的值，通过回调可以 看到数据是发生了变化的
  
  

二、问题分析

导致问题出现的原因：下拉框数据是通过回显得到的，因为数据层次太多，render函数没有自动更新，数据更改没有触发render，所以可以通过手动去刷新实现回显数据增删同步。

三、解决方法

1.方法一 vm.$set

当视图自动更新失败时，vue提供了set方法

vm.$set(target,propertyName/index,value)

，用此方法更新视图达到操作同步的效果：

vm.$set(target,propertyName/index,value)

• 代码演示：

method: {
		change(event, item) {
	      console.log(event)
	    },
		// 获取编辑数据
    	editForm(data) {
    	this.form = JSON.parse(data)
		/* this.form.values = this.form.tagCode.substr(1, this.form.tagCode.length - 2)
        .replace(/\s+/g, '')
        .split(',') */
        var arr = this.form.tagCode.substr(1, this.form.tagCode.length - 2)
        .replace(/\s+/g, '')
        .split(',')
        // 这里！这里！这里！
      	this.$set(this.form, 'values', arr)
        console.log(this.form.values)
		}
	}

• 结果展示：
  
  

2.方法二 vm.$forceUpdate()

从方法一知道只要强制刷新就能解决问题，对于

强制刷新

vue API文档提供了

vm.$forceUpdate()

方法：

• 
vm.$forceUpdate()

  ：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
• 代码演示：

method: {
		change(event, item) {
	      console.log(event)
	      // 方法二： 这里！这里！这里！
	      this.$forceUpdate()
	    },
		// 获取编辑数据
    	editForm(data) {
	    	this.form = JSON.parse(data)
	      	this.form.values = this.form.tagCode.substr(1, this.form.tagCode.length - 2)
	        .replace(/\s+/g, '')
	        .split(',')
	      /* var arr = this.form.tagCode.substr(1, this.form.tagCode.length - 2)
	        .replace(/\s+/g, '')
	        .split(',')
	      // 方法一 ：这里！这里！这里！
	      this.$set(this.form, 'values', arr)*/
	      console.log(this.form.values)
		}
	}

• 结果跟方法一的结果相同