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

發(fā)布時(shí)間：2020-09-09 09:19:21 來源：腳本之家閱讀：1659 作者：cofecode 欄目：web開發(fā)

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

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

那如何修改呢？

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

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

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

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

拓展知識(shí)：基于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是后臺(tái)讀取的一個(gè)類型值，

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

然后我每次后臺(tái)讀取的數(shù)據(jù)都沒法顯示真正的text（即上面option中l(wèi)abel）的值，只是顯示了dict_id的真實(shí)值。各種嘗試后發(fā)現(xià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è)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽