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

文章目录

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

一、问题描述

项目上使用Vue+elementUI-select多选下拉框做数据编辑时,数据回显成功,但是无法对回显成功数据进行操作。
Vue elementUI-select多选下拉框数据回显成功后,点击下拉选项或删除回显数据无反应_第1张图片

  • 代码片段:
<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的值:
    Vue elementUI-select多选下拉框数据回显成功后,点击下拉选项或删除回显数据无反应_第2张图片
  • 使用select提供的change方法监听this.form.values的值,通过回调可以 看到数据是发生了变化的
    Vue elementUI-select多选下拉框数据回显成功后,点击下拉选项或删除回显数据无反应_第3张图片

二、问题分析

导致问题出现的原因:下拉框数据是通过回显得到的,因为数据层次太多,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)
		}
	}
  • 结果展示:
    Vue elementUI-select多选下拉框数据回显成功后,点击下拉选项或删除回显数据无反应_第4张图片
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)
		}
	}
  • 结果跟方法一的结果相同

你可能感兴趣的:(vue,vue,element,javascript)