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显示的便是期望的汽车

参考

上一篇下一篇

猜你喜欢

热点阅读