这个是今天遇到一个坑，因为也是第一次使用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; //这样才对。
}