vue-element的select下拉框赋值实例

 更新时间:2022年03月31日 15:03:22   作者:前端王小婷  
这篇文章主要介绍了vue-element的select下拉框赋值实例,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue-element的select下拉框赋值

当返回值是对象数组的时候

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

当返回值是字符串数组的时候

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item"
      :value="item">
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          '黄金',
          '白银',
          '铂金',
          '钻石',
        ],
        value: ''
      }
    }
  }
</script>

vue+elementUi select框赋值后无法选值

body结构

<el-form-item label="商品种类" class="FormInputClass">
  <el-select v-model="adminSaveParam.prodClass" clearable placeholder="请选择" size="mini" class="formInput" @change="selectChange">
    <el-option
      v-for="item in prodClass"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</el-form-item>

赋值

if (supplier.isVmi === "Y") {
              this.adminSaveParam.prodClass = "VMI";
            } else if (supplier.isVmi === "N") {
              this.adminSaveParam.prodClass = "physical";
            }
          }

经过这个样的赋值之后,在页面选择下拉数据的时候无法选中(其实已经更改,只是页面没有实时刷新)

在change事件里用这个方法

 selectChange(){
    this.$forceUpdate()
  },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue+webpack项目基础配置教程

    Vue+webpack项目基础配置教程

    这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下
    2018-02-02
  • 详解Vue2 添加对scss的支持

    详解Vue2 添加对scss的支持

    这篇文章主要介绍了详解Vue2 添加对scss的支持,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 五种Vue实现加减乘除运算的方法总结

    五种Vue实现加减乘除运算的方法总结

    这篇文章主要为大家详细介绍了五种Vue实现加减乘除运算的方法,文中的示例代码简洁易懂,对我们深入了解vue有一定的帮助,需要的可以了解下
    2023-08-08
  • Vue前后端不同端口的实现方法

    Vue前后端不同端口的实现方法

    今天小编就为大家分享一篇Vue前后端不同端口的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 如何使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理

    如何使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理

    最近在做一个文件夹管理的功能,要实现一个树状的拖拽文件夹面板,里面包含两种元素,文件夹以及文件,这篇文章主要介绍了使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理 ,需要的朋友可以参考下
    2023-09-09
  • vuex中能直接修改state吗

    vuex中能直接修改state吗

    当我们使用vuex的时候,时不时能看到“更改Vuex中的store中的状态唯一办法就是提交mutations”,但是有没有试想过,我们不提交mutations其实也能修改state的值?答案是可以的,下面通过本文介绍下vuex修改state值的方法,感兴趣的朋友一起看看吧
    2022-11-11
  • Vue动态控制input的disabled属性的方法

    Vue动态控制input的disabled属性的方法

    这篇文章主要介绍了Vue动态控制input的disabled属性的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue中vee validate表单校验的几种基本使用

    vue中vee validate表单校验的几种基本使用

    这篇文章主要介绍了vee-validate表单校验的基本使用,需要的朋友可以参考下
    2018-06-06
  • VueCLI通过process.env配置环境变量的实现

    VueCLI通过process.env配置环境变量的实现

    本文主要介绍了VueCLI通过process.env配置环境变量的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue2.x双向数据绑定原理解析

    vue2.x双向数据绑定原理解析

    双向数据绑定原理主要运用了发布订阅模式来实现的,通过Object.defineProperty对数据劫持,触发getter,setter方法,这篇文章主要介绍了vue2.x双向数据绑定原理,需要的朋友可以参考下
    2023-02-02

最新评论