vue下拉列表的两种实现方式
第一种采用v-for的方式<el-select v-model="form.columeType" placeholder="字段类型"><el-option v-for="(item,index) in columeTypeArr" :key="index" :label=&
·
第一种采用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中进行配置,对于需要数据从后台回显的情况,明显是第一种方法好。对于简单的下拉列表参数很少的情况,第二种明显更占优。
更多推荐
已为社区贡献6条内容
所有评论(0)