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

更新時(shí)間：2018年08月24日 10:05:08 作者：cofecode

今天小編就為大家分享一篇element-ui中的select下拉列表設(shè)置默認(rèn)值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

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

那如何修改呢？

上element-ui中的代碼片段

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

修改如下

<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: '0',
   label: '全部'
  }, {
   value: '1',
   label: '待收款'
  }, {
   value: '2',
   label: '已收款'
  }, {
   value: '3',
   label: '已發(fā)貨'
  },
  value: '全部'
  }
 }
 }
</script>

接下來(lái)。我們?cè)邳c(diǎn)擊查詢的方法里打印一下value的值

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

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

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

如下所示：

<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是后臺(tái)讀取的一個(gè)類型值，

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

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

因?yàn)楹笈_(tái)讀取到的dictId是字符串比如：“1”，而option根據(jù)value查找對(duì)比的是數(shù)字int：1，所以每次后臺(tái)讀取的數(shù)據(jù)必須在paraeInt，才可以正確顯示。

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

您可能感興趣的文章: