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

news/2024/7/10 2:12:55 标签: java, vue, python, mysql, mybatis

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
	 },

http://www.niftyadmin.cn/n/1546961.html

相关文章

C#将时间格式 yyyy-mm-dd hh:mm:ss转换为yyyyMMddHHmmss

string src "2011-12-02 15:03:50"; string result DateTime.ParseExact(src,"yyyy-MM-dd HH:mm:ss", null).ToString("yyyyMMddHHmmss"); 结果为&#xff1a; 20111202150350 转载于:https://www.cnblogs.com/wdw31210/archive/2011/12/22/22…

MongoDB的备份和恢复

MongoDB的备份和恢复 进入mongodb bin目录 导出 ./mongodump -d database 导入 ./mongorestore -d test -c user /tmp/testdb/ 相关参数 --host localhost --port 27017 --username quicktest --password quicktest --collection trans.sp --db quicktest 参考&#xff1a; htt…

HTML中textarea标签的换行方法

<textarea> 标签定义多行的文本输入控件。 文本区中可容纳无限数量的文本&#xff0c;其中的文本的默认字体是等宽字体&#xff08;通常是 Courier&#xff09;。 <textarea> 标签的换行效果经常用到&#xff0c;实现它文本换行要用到wrap属性&#xff1a; wrap“o…

Linux 非root用户安装nginx

Linux 非root用户安装nginx wget http://nginx.org/download/nginx-1.9.3.tar.gz tar -zxvf nginx-1.9.3.tar.gz cd nginx-1.9.3 ./configure --prefix/你的目录/nginx \ --sbin-path/你的目录//nginx/nginx \ --conf-path/你的目录//nginx/nginx.conf \ --pid-path/你的目录//…

linux下网络配置[转]

修改配置文件/etc/sysconfig/network-scripts/ 下有配置文件比如文件&#xff1a;ifcfg-eth0 代表是以太网实际网卡0的配置文件比如文件&#xff1a;ifcfg-eth0:1 代表是以太网实际网卡0的配置文件域名服务器配置文件&#xff1a;/etc/ resolv.conf修改ip地址即时生效:# ifconf…

设计差异引发WebServices 安全性问题

【http://www.enet.com.cn/esoftware/ 2007年08月21日15&#xff1a;48 来源&#xff1a;赛迪网 作者:Paul Korzeniowski/Kevin】 随着Web Services应用的发展&#xff0c;厂商们试图得出一套成型的方法来保证应用层信息安全。“厂商们已经开发了一整套标准来保护Web Servic…

Linux Tomcat启动时卡在“INFO: Deploying web application directory ......”

Linux Tomcat启动时卡在“INFO: Deploying web application directory ......” 参考&#xff1a; http://blog.csdn.net/njchenyi/article/details/46641141 修改jdk1.x.x_xx/jre/lib/security/Java.security文件&#xff1a; securerandom.sourcefile:/dev/./urandom

STM32 ADC

ADC一般与DMA一起使用&#xff0c;电路图上经常会写ADC12,ADC123之类的&#xff0c;表示此通道是ADC1和ADC2共用的&#xff0c;不同的ADC转换器可以共同工作&#xff0c;但一个在不同的转换器的同一通道只能单个工作 。转载于:https://www.cnblogs.com/Jezze/archive/2011/12/2…