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

element-ui中的select下拉列表設(shè)置默認(rèn)值方法

 更新時間：2018年08月24日 10:05:08   作者：cofecode  
今天小編就為大家分享一篇element-ui中的select下拉列表設(shè)置默認(rèn)值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

element-ui中的select下拉列表如何設(shè)置默認(rèn)值？

在element-ui的運用中，涉及到了select下拉列表。項目中需要將select的默認(rèn)值給展示出來

那如何修改呢？

上element-ui中的代碼片段

<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"
  :label="item.label"
  :value="item.value">
 </el-option>
 </el-select>
</template>

<script>
 export default {
 data() {
  return {
  options: [{
   value: '0',
   label: '全部'
  }, {
   value: '1',
   label: '待收款'
  }, {
   value: '2',
   label: '已收款'
  }, {
   value: '3',
   label: '已發(fā)貨'
  },
  value: '全部'
  }
 }
 }
</script>

接下來。我們在點擊查詢的方法里打印一下value的值

onSearch () {
 // console.log('value是' + this.value)
 if (this.value === '全部') {
  this.value = '0'
 }
}

這樣就保證了this.value打印出來的為0,1,2,3。拿到這些值后，就可以傳給后端，請求數(shù)據(jù)了！

拓展知識：基于VUE中的el-select 初始值設(shè)置問題介紹

如下所示：

<el-select v-model="form.admin_type" placeholder="所在分組" ><el-option v-for="item in selectItem" :label="item.dict_desc" :value="item.dict_id" :key="item.dict_id"></el-option></el-select>

本人用的是vue下ELement，上面事例里面的v-model里面是admin_type是后臺讀取的一個類型值，

當(dāng)這個admin_type和dict_id相等的時候，option就相當(dāng)于設(shè)置了selected。

然后我每次后臺讀取的數(shù)據(jù)都沒法顯示真正的text（即上面option中l(wèi)abel）的值，只是顯示了dict_id的真實值。各種嘗試后發(fā)現(xiàn)和我之前的一篇博客所說的問題一樣。

因為后臺讀取到的dictId是字符串比如：“1”，而option根據(jù)value查找對比的是數(shù)字int：1，所以每次后臺讀取的數(shù)據(jù)必須在paraeInt，才可以正確顯示。

以上這篇element-ui中的select下拉列表設(shè)置默認(rèn)值方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論