vue下拉列表的兩種實現方式
阿新 • • 發佈:2019-02-20
第一種採用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中進行配置,對於需要資料從後臺回顯的情況,明顯是第一種方法好。對於簡單的下拉列表引數很少的情況,第二種明顯更佔優。