Vue中获取Element-UI下拉框的label和value值
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
1 .效果如下:
点击对应的选项获取一个定义的id值和标签值,可以讲这2个值传给后端,而不用根据id查询名称。
2 .代码和说明如下
下面展示一些 内联代码片
。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-row>
<el-col>
<el-select v-model="getValue" filterable placeholder="请选择" @change="getSelect">
<el-option
v-for="item in options"
:key="item.id"
:label="item.label"
:value="[item.id,item.label]"> 这里注意
</el-option>
</el-select>
{{getValue}}
</el-col>
</el-row>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
getValue: '',
options: [{//选项数据:模拟从后端拿到的数据
id: '1',
label: '黄金糕'
}, {
id: '2',
label: '双皮奶'
}, {
id: '3',
label: '蚵仔煎'
}, {
id: '4',
label: '龙须面'
}, {
id: '5',
label: '北京烤鸭'
}],
},
methods:{
getSelect:function(e){//e代表被选中的值,即下拉框的value。由于写的是[item.id,item.label],现在是包含2个值的数组
console.log(Array.isArray(e))
let [id,label]=e //数组解构:数组解构时数组的元素是按次序排列的,变量的取值由它的位置决定
console.log(id)//id值
console.log(label)//label值
}
}
})
</script>
</html>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)