1. 程式人生 > >vue下拉列表的兩種實現方式

vue下拉列表的兩種實現方式

第一種採用v-for的方式

  <el-select v-model="form.columeType" placeholder="欄位型別">
           <el-option v-for="(item,index) in columeTypeArr" :key="index" :label="item.label" :value="item.value">
           </el-option>
  </el-select>

這種方式需要在data中定義columeTypeArr,如下

data(){
    return
{ columeTypeArr:[{ value:'String', label:'字串' },{ value:'Int', label:'整數', },{ value:'Decimal', label:'數值型' }], } }

第二種採用寫死的方式,直接在select下寫死

  <el-select v-model="form.fileOrgType" placeholder=
"請選擇"> <el-option label="是" value="Y"> </el-option> <el-option label="否" value="N"></el-option> </el-select>

兩種方式的比較:
兩種方式都差不多,只是第一種方式需要在data中進行配置,對於需要資料從後臺回顯的情況,明顯是第一種方法好。對於簡單的下拉列表引數很少的情況,第二種明顯更佔優。