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

vue-element的select下拉框賦值實(shí)例

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

vue-element的select下拉框賦值

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

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
    <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: '選項(xiàng)1',
          label: '黃金糕'
        }, {
          value: '選項(xiàng)2',
          label: '雙皮奶'
        }, {
          value: '選項(xiàng)3',
          label: '蚵仔煎'
        }, {
          value: '選項(xiàng)4',
          label: '龍須面'
        }, {
          value: '選項(xiàng)5',
          label: '北京烤鴨'
        }],
        value: ''
      }
    }
  }
</script>

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

<template>
  <el-select v-model="value" placeholder="請(qǐng)選擇">
    <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="請(qǐng)選擇" 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)過這個(gè)樣的賦值之后,在頁(yè)面選擇下拉數(shù)據(jù)的時(shí)候無法選中(其實(shí)已經(jīng)更改,只是頁(yè)面沒有實(shí)時(shí)刷新)

在change事件里用這個(gè)方法

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

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

相關(guān)文章

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

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

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

    詳解Vue2 添加對(duì)scss的支持

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

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

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

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

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

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

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

    vuex中能直接修改state嗎

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

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

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

    vue中vee validate表單校驗(yàn)的幾種基本使用

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

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

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

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

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

最新評(píng)論