如何利用VueJS创建动态的下拉框并绑定数据源

JavaScript017

如何利用VueJS创建动态的下拉框并绑定数据源,第1张

<el-form-item label="申请类型" prop="applyType">

<el-select v-model="param.ptpFprojInf.applyType" :disabled="isDisabled"

clearable placeholder="请选择" size="small">

<el-option

v-for="item in applyTypes"

:key="item.value"

:label="item.label"

:value="item.value">

</el-option>

</el-select>

</el-form-item>

applyTypes 这个是个数组形式,存放的就是下拉框的内容,只要改变这个数组,自然下拉框的内容也就变了啊

选择你要设置的单元格,数据--有效性,弹出“数据有效性”对话框--设置,“有效性条件”中“允许”选择“序列”,在“来源”处输入你想要在下拉列表中显示的“默认值”,两个值之间用英文状态下的逗号隔开,确定即可(也可引用一些单元格的数据为“默认值”)。

实际项目中我们获取选择的数据的id;这时候

需要配合使用v-bind,才能获取到选择的那条数据的id值,其实就是id赋值给value属性

<template>

<div>

<select

v-model="select"

>

<option

v-for="(a,index)

in

arr"

:key="index"

:value="a.id">{{

a.name

}}</option>

</select>

<p>您选择的名字的Id是:{{select}}</p>

</div>

</template>

js代码

<script>

export

default

{

data(){

return{

select:'',

arr:[

{id:'1',name:'html'},

{id:'2',name:'css'},

{id:'3',name:'js'},

]

}

}

}

</script>

拓展知识:vue获取id以及重定向路由方法

1.获取ID的方法:

let

orderId=this.$route.query.id

2.路由重定向方法

this.$router.push(this.$route.query.redirect

||

'/login')

以上这篇vue操作下拉选择器获取选择的数据的id方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:Vue.js获取被选择的option的value和text值方法vue如何通过id从列表页跳转到对应的详情页vue实现在表格里,取每行的id的方法