element-ui中的select下拉列表如何設置默認值？

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

那如何修改呢？

上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: '已發貨'  },  value: '全部'  } } }</script>

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

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

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

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

如下所示：

<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是后臺讀取的一個類型值，

當這個admin_type和dict_id相等的時候，option就相當于設置了selected。

然后我每次后臺讀取的數據都沒法顯示真正的text（即上面option中label）的值，只是顯示了dict_id的真實值。各種嘗試后發現和我之前的一篇博客所說的問題一樣。

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

以上這篇element-ui中的select下拉列表設置默認值方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。