vue ui组件elementui的el-select默认选中问
2018-10-31 本文已影响110人
nextliving
今天有个需求,需要实现el-select的默认选中问题。数据结构如下:
export default {
data() {
return {
projects: [
{'pid': 1, 'name': "汽车"},
{'pid': 2, 'name': "手机"},
{'pid': 3, 'name': "手表"},
],
projectValue: ''
},
}
这里的pid类型是Number.
对应的el-select如下:
<el-form-item label="项目名称" >
<el-select v-model="projectValue" placeholder="请选择" @change="projectSelectChanged" disabled>
<el-option
v-for="item in projects"
:key="item.pid"
:label="item.name"
:value="item.pid" >
</el-option>
</el-select>
</el-form-item>
现在我需要el-select默认选中pid为1数据,于是写了如下方法:
beforeMount: function() {
this.projectValue = "1";
},
结果el-select界面上一直显示的是1
,而不是我期望的汽车
。经过思考,怀疑是因为数据类型不一致导致。于是调整代码如下:
beforeMount: function() {
this.projectValue = Number("1");
},
然后el-select显示的便是期望的汽车
。