element-ui中select下拉框,选择后赋值成功,但是框上不显示的坑
这个是今天遇到一个坑,因为也是第一次使用vue+element-ui开发,所以记录一下自己遇到的一些问题。
这个问题是在开发省市区三级联动组件的时候遇到的,具体的情况如下发的gif图,虽然解决了问题,但是还是没有懂是为什么这样,有人说是element的bug,不过我觉得不像,可能是用法的问题吧,希望知道原因的博友们可以告知,现在先上下代码;
1.首先address.json的格式是:
[
{ "name": "北京", "city":[{"name":"北京", "area":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","平谷区","怀柔区","密云县","延庆县"]}]},
{ "name": "天津", "city":[{"name":"天津", "area":["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","宁河县","静海县","蓟 县"]}]}
]
1.然后就是组件的代码了,功能很简单,也加了一些注释
<template>
<div class="ad-box">
<el-select v-model="province" placeholder="选择省" style="width: 150px;">
<el-option :label="item.name" @click.native="provinceChange(item)" :key="item.name" v-for="item in data" :value="item.name"></el-option>
</el-select>
<el-select v-model="city" placeholder="选择市" style="width: 150px;">
<el-option :label="item.name" v-for="item in citylist" @click.native="cityChange(item)" :key="item.name" :value="item.name"></el-option>
</el-select>
<el-select v-model="area" placeholder="选择区/乡镇" style="width: 150px;">
<el-option :label="item" @click.native="emitData" v-for="item in arealist" :key="item" :value="item"></el-option>
</el-select>
</div>
</template>
<script>
// 获取地址JSON
import addressJSON from './address.json';
export default {
data() {
return {
onecetime: true,
province: '',
city: '',
area: '',
data: addressJSON,
citylist: [],
arealist: [],
}
},
props: {
address: {
type: Object,
default: function () {
return {
province: '',
city: '',
area: ''
}
}
}
},
watch: {
'address.province': function(val, oldVal) {
if (val && this.onecetime) {
this.data.map(item => {
if (item.name == this.address.province) {
this.citylist = item.city;
if (this.address.city) {
this.citylist.map(item => {
if (item.name == this.address.city) {
this.arealist = item.area;
}
})
}
return false;
}
})
this.area = this.address.area;
this.city = this.address.city;
this.province = this.address.province;
this.onecetime = false;
}
},
},
// 通过默认值获取初始的三栏下拉列表
created() {
this.area = this.address.area;
this.city = this.address.city;
this.province = this.address.province;
},
methods: {
// 选择省份后清空市和区
provinceChange(item) {
this.city = '';
this.area = '';
this.getList('citylist', item, 'city')
this.emitData(); //因为需求是可以不用填写完整的,所以每填一栏上传一次结果
},
// 选择市后情况区/县
cityChange(item) {
this.area = '';
this.getList('arealist', item, 'area')
this.emitData();
},
// 联动获取下一栏中的选项列表,参考地址的JSON格式
getList(prop, data, name) {
this[prop] = data[name];
},
// 向父级组件发送自定义事件,提交选择结果
emitData() {
let data = {
province: this.province,
city: this.city,
area: this.area
};
this.$emit('getAddress', data);
}
}
}
</script>
<style scoped lang="scss">
.ad-box {
display: inline-block;
}
</style>
1.组件的使用方式:
//先注入组件后:
<address3 @getAddress="changeAddress" :address="{province: '福建', city: '漳州', area: '芗城区'}"></address3>
其实是很简单的一个组件,为什么要写这博客记录呢,其实就是跟标题说的一样,element-ui中的select的赋值问题:
如果 el-select 上 v-model="" 绑定的这个字段没有事先定义好的话,而且你的option是通过请求到的数组v-for出来的话(如果option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数值已经绑定上去了的后果
举个例子:
比如 我有个 用户信息编辑页面, this.info通过请求获取, banklist也是通过请求获取银行列表的
<el-select v-model="info.bankId" placeholder="选择开户银行">
<el-option :label="item.bankName" :key="item.bankId" v-for="item in banklist" :value="item.bankId"></el-option>
</el-select>
//这时候,就会出现标题上的坑,选择选项后,从vue dev-tools看发现值已经赋进去了,但是select上就是不显示选中的label
//处理的方法还是 在 data中事先申明一个属性,不要再v-model中绑定不存在的属性就不会出现这种情况,但是现实开发中这样又很麻烦,要多赋值一遍
2017.08.30:
回复之前的赋值无效的问题,因为之前的方式是从props拿到值后,就直接赋值给对应的属性,但是当props是异步请求回去的,那么他的第一次的值就为我们定义的初始值,没定义就是undefined,等异步亲贵回来之后,它早在第一次的时候,就把初始值赋值过了,请求回来后不再执行赋值了,所以就赋值不了返回后的结果,现已更改为使用watch来监听props的改变,这里有个注意点:props绑定的父级属性不能是返回结果后改变的属性,比如说
···
<address @success="callback" :address="defaultVal">
//父级methods中
callback(val) {
this.defaultVal = val; //这样是不对的, 因为你再子组件中watch了address相当于是defaultVal,如果你再callback中讲子组件传过来的值又赋值回去给defaultVal,就相当于又触发了watch,
this.addressVal = val; //这样才对。
}
element-ui中select下拉框,选择后赋值成功,但是框上不显示的坑的更多相关文章
- element UI 验证select 下拉问题
解决方式: 添加了type类型.
- Bootstrap Flat UI的select下拉框显示不出来 问题解决
Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...
- Atitit.ui控件---下拉菜单选择控件的实现select html
Atitit.ui控件---下拉菜单选择控件的实现select html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& m ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
- LayUI中select下拉框选中触发事件
代码: var form = layui.form, layer = layui.layer; // 监听 $(document).ready(function() { // select下拉框选中触 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- 安卓系统浏览器中select下拉按钮无法弹出选择面板奇怪问题解决
今天遇到个让人崩溃的问题: 平台: 安卓 4.0 描述: 使用 appcan 开发 hybrid 应用,手机上点击下拉选框按钮无法弹出选择面板. 说明: 发现 webkit 内核 position:f ...
- ionic中select下拉框点击无反应解决办法
两种解决办法: 1.在select外的div加入属性 data-tap-disabled=”true” 2.找到ionic.bundle.js文件 的下面这个函数,添加如图两行代码
随机推荐
- linux arm的存储分布那些事之一
转自:http://blog.csdn.net/xiaojsj111/article/details/11724081 linux arm 内存分布总览 上图是linux的arm的虚拟地址分布 ...
- popup menu案例,无说明只代码
效果图: 布局文件, 展示列表的容器 <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
- RSA加密解密与加签验签
RSA公钥加密算法是1977年由罗纳德·李维斯特(Ron Rivest).阿迪·萨莫尔(Adi Shamir)和伦纳德·阿德曼(Leonard Adleman)一起提出的.1987年7月首次在美国公布 ...
- linux磁盘占用跟每个文件夹大小总和不符
1.一种情况是删除了大文件但是没有释放出来,因为有进程还在调用使用 最简单的方法是reboot下服务器再对比下: 2.查看服务器空间使用情况 df -h cd / du -sh *
- jQuery使用blur()方法触发两次的解决方法
在项目中的textarea在是去焦点时对文本内容进行验证,这时候使用了blur方法,但是实现时blur的回调函数执行了两次,这里我也不知道为什么,然后就尝试先解除blur事件绑定,然后再绑定blur事 ...
- POJ-2778
DNA Sequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12726 Accepted: 4862 Des ...
- Flask 的系统学习
详细看地址: http://www.cnblogs.com/wupeiqi/articles/7552008.html 一. 说明 Flask是一个基于Python开发并且依赖jinja2模板和Wer ...
- 微信小程序 - video组件poster无效 / 视频播放列表
在做有关微信小程序有关视频播放页面的时候,遇到video组件设置poster无效果,然后查了下poster属性:视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 pos ...
- Go语言基础单元测试示例
这个要熟悉原理,要能写.. 但现在..... 注意,没有main函数,以_test.go结尾,命令go test -v package main import ( "testing" ...
- Spring学习(一)——Spring中的依赖注入简介
[前面的话] Spring对我太重要了,做个关于web相关的项目都要使用Spring,每次去看Spring相关的知识,总是感觉一知半解,没有很好的系统去学习一下,现在抽点时间学习一下Spring.不知 ...