Vue elementUI-select多选下拉框数据回显成功后，点击下拉选项或删除回显数据无反应

女爷i 2023-10-10 11:29 6阅读 0赞

#### 文章目录 ####

*   *   *  一、问题描述
         *  二、问题分析
         *  三、解决方法
         *   *  1.方法一 vm.$set
             *  2.方法二 vm.$forceUpdate()

#### 一、问题描述 ####

项目上使用Vue+elementUI-select多选下拉框做数据编辑时，数据回显成功，但是无法对回显成功数据进行操作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70]

*  代码片段：

<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的值：  
    ![在这里插入图片描述][20200826170205933.png]
 *  使用select提供的`change`方法监听this.form.values的值，通过回调可以 看到数据是发生了变化的  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70 1]

#### 二、问题分析 ####

导致问题出现的原因：下拉框数据是通过回显得到的，因为数据层次太多，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)
    		}
    	}

*  结果展示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70_pic_center]

##### 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)
    		}
    	}

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200826164654573.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M=,size_16,color_FFFFFF,t_70
[20200826170205933.png]: https://img-blog.csdnimg.cn/20200826170205933.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200826173209877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200826175406844.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3podXppY2M=,size_16,color_FFFFFF,t_70#pic_center