欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-element的select下拉框賦值實例

 更新時間:2022年03月31日 15:03:22   作者:前端王小婷  
這篇文章主要介紹了vue-element的select下拉框賦值實例,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

vue-element的select下拉框賦值

當(dāng)返回值是對象數(shù)組的時候

<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>

當(dāng)返回值是字符串?dāng)?shù)組的時候

<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結(jié)構(gòu)

<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";
? ? ? ? ? ? }
? ? ? ? ? }

經(jīng)過這個樣的賦值之后,在頁面選擇下拉數(shù)據(jù)的時候無法選中(其實已經(jīng)更改,只是頁面沒有實時刷新)

在change事件里用這個方法

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

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue+webpack項目基礎(chǔ)配置教程

    Vue+webpack項目基礎(chǔ)配置教程

    這篇文章主要介紹了Vue+webpack項目基礎(chǔ)配置教程,需要的朋友可以參考下
    2018-02-02
  • 詳解Vue2 添加對scss的支持

    詳解Vue2 添加對scss的支持

    這篇文章主要介紹了詳解Vue2 添加對scss的支持,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • 五種Vue實現(xiàn)加減乘除運算的方法總結(jié)

    五種Vue實現(xiàn)加減乘除運算的方法總結(jié)

    這篇文章主要為大家詳細介紹了五種Vue實現(xiàn)加減乘除運算的方法,文中的示例代碼簡潔易懂,對我們深入了解vue有一定的幫助,需要的可以了解下
    2023-08-08
  • Vue前后端不同端口的實現(xiàn)方法

    Vue前后端不同端口的實現(xiàn)方法

    今天小編就為大家分享一篇Vue前后端不同端口的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 如何使用Vue3+elementPlus的Tree組件實現(xiàn)一個拖拽文件夾管理

    如何使用Vue3+elementPlus的Tree組件實現(xiàn)一個拖拽文件夾管理

    最近在做一個文件夾管理的功能,要實現(xiàn)一個樹狀的拖拽文件夾面板,里面包含兩種元素,文件夾以及文件,這篇文章主要介紹了使用Vue3+elementPlus的Tree組件實現(xiàn)一個拖拽文件夾管理?,需要的朋友可以參考下
    2023-09-09
  • vuex中能直接修改state嗎

    vuex中能直接修改state嗎

    當(dāng)我們使用vuex的時候,時不時能看到“更改Vuex中的store中的狀態(tài)唯一辦法就是提交mutations”,但是有沒有試想過,我們不提交mutations其實也能修改state的值?答案是可以的,下面通過本文介紹下vuex修改state值的方法,感興趣的朋友一起看看吧
    2022-11-11
  • Vue動態(tài)控制input的disabled屬性的方法

    Vue動態(tài)控制input的disabled屬性的方法

    這篇文章主要介紹了Vue動態(tài)控制input的disabled屬性的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-06-06
  • vue中vee validate表單校驗的幾種基本使用

    vue中vee validate表單校驗的幾種基本使用

    這篇文章主要介紹了vee-validate表單校驗的基本使用,需要的朋友可以參考下
    2018-06-06
  • VueCLI通過process.env配置環(huán)境變量的實現(xiàn)

    VueCLI通過process.env配置環(huán)境變量的實現(xiàn)

    本文主要介紹了VueCLI通過process.env配置環(huán)境變量的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • vue2.x雙向數(shù)據(jù)綁定原理解析

    vue2.x雙向數(shù)據(jù)綁定原理解析

    雙向數(shù)據(jù)綁定原理主要運用了發(fā)布訂閱模式來實現(xiàn)的,通過Object.defineProperty對數(shù)據(jù)劫持,觸發(fā)getter,setter方法,這篇文章主要介紹了vue2.x雙向數(shù)據(jù)綁定原理,需要的朋友可以參考下
    2023-02-02

最新評論