Element UI 在打开编辑页面时select选择框不能正常显示的问题

Element UI 在打开编辑页面时select选择框不能正常显示的问题

 

从Grid列表打开编辑页面，中间的选择框(字段type)在选择后vue里type正常变化，但select不能正常显示

该行记录里type字段的初始值为null 或者 '', type有值时，没有问题

 

//显示编辑界面

handleEdit: function (index, row) {
	this.editFormVisible = true;
	//this.editForm = Object.assign({}, row);
	this.editForm.id = row.id;
	this.editForm.type = row.type;
},

 

使用自动赋值会存在该问题

this.editForm = Object.assign({}, row);

改为给具体字段赋值，解决该问题

this.editForm.type = row.type;

 

 

主要原因是：

   使用this.editForm = Object.assign({}, row);初始化editForm时，type值为null,会造成editForm没有type属性

   使用this.editForm.type = row.type; 即使type为null, 但editForm有type属性，组件在初始化时能正常运行

 

页面编辑代码如下：

<el-form-item  label = '分类' prop="type">
    <el-select v-model="editForm.type" clearable placeholder="请选择分类">
	 <el-option
		 v-for="item in typeList"
		 :label="item.name"
		 :value="item.id">
	 </el-option>
    </el-select>
</el-form-item>

 

 editFormVisible: false,//编辑界面是否显示
	editLoading: false,
	editFormRules: {
		type: [
		    { required: true, message: '请选择类型', trigger: 'blur' }
		 ]
	     },
	 //编辑界面数据
	 editForm: {
		 id: null,
		 type: null
	 },