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(element ui)中操作row参数的使用方式

    Vue(element ui)中操作row参数的使用方式

    这篇文章主要介绍了Vue(element ui)中操作row参数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • Vue自定义铃声提示音组件的实现

    Vue自定义铃声提示音组件的实现

    这篇文章主要介绍了Vue中自定义一个铃声提示音组件的实现以及使用方法,文中的示例代码讲解详细,对我们学习Vue有一定帮助,需要的可以参考一下
    2022-01-01
  • Vue组件间通信的实现方法讲解

    Vue组件间通信的实现方法讲解

    组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的
    2023-01-01
  • VUE 自定义组件模板的方法详解

    VUE 自定义组件模板的方法详解

    这篇文章主要介绍了VUE 自定义组件模板的方法,结合实例形式详细分析了vue.js自定义组件模板的相关步骤与操作技巧,需要的朋友可以参考下
    2019-08-08
  • vue 单页应用和多页应用的优劣

    vue 单页应用和多页应用的优劣

    这篇文章主要介绍了vue 单页应用和多页应用的优劣,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-10-10
  • Vue项目中缺少明显入口文件的原因及解决策略

    Vue项目中缺少明显入口文件的原因及解决策略

    本文探讨了Vue项目中缺少明显入口文件的原因,并提供了解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-11-11
  • Vue解析剪切板图片并实现发送功能

    Vue解析剪切板图片并实现发送功能

    这篇文章主要介绍了Vue解析剪切板图片并实现发送功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue开发设计分支切换与cleanup实例详解

    vue开发设计分支切换与cleanup实例详解

    这篇文章主要为大家介绍了vue开发设计分支切换与cleanup实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • el-table 选中行与复选框相互联动的实现步骤

    el-table 选中行与复选框相互联动的实现步骤

    这篇文章主要介绍了el-table 选中行与复选框相互联动,分为两步,第一步点击行时触发复选框的选择或取消,第二步点击复选框时触发相应行的变化,本文通过实例代码给大家详细讲解,需要的朋友可以参考下
    2022-10-10
  • 详解vue在项目中使用百度地图

    详解vue在项目中使用百度地图

    这篇文章主要介绍了vue在项目中使用百度地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03

最新评论