vue获取element-ui的下拉框的值
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
一 : vue+element 获取下拉框的值,代码:
<template>
<div>
<el-row>
<el-col :span="5"
><div class="grid-content bg-purple">
<el-select
:default-active="$route.path"
@change="chickvalue"
v-model="searchValue"
filterable
placeholder="请输入/请选择"
class="h-m-select"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select></div
></el-col>
<el-col :span="24">
<!--操作按钮-->
</el-col>
<el-col :span="24">
<!--列表-->
</el-col>
<el-col :span="24">
<!--列表底部内容-->
</el-col>
</el-row>
<el-row>
<router-view> </router-view>
</el-row>
</div>
</template>
<script>
export default {
name: 'homeMenu',
data() {
return {
options: [
{
value: '选项0',
label: '保密设置'
},
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
},
{
value: '/home',
label: '首页'
}
],
searchValue: ''
}
},
methods: {
chickvalue(value) {
alert(value)
}
}
}
</script>
关键代码:
el-select标签的@change方法和回调参数; v-model数据绑定
el-option的:value的数据绑定;
二 : 获取选中的对象,换一下绑定的值就行:
<template>
<div>
<el-row>
<el-col :span="5"
><div class="grid-content bg-purple">
<el-select
:default-active="$route.path"
@change="chickvalue"
v-model="searchValue"
filterable
placeholder="请输入/请选择"
class="h-m-select"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item"> </el-option>
</el-select></div
></el-col>
<el-col :span="24">
<!--操作按钮-->
</el-col>
<el-col :span="24">
<!--列表-->
</el-col>
<el-col :span="24">
<!--列表底部内容-->
</el-col>
</el-row>
<el-row>
<router-view> </router-view>
</el-row>
</div>
</template>
<script>
export default {
name: 'homeMenu',
data() {
return {
options: [
{
value: '选项0',
label: '保密设置'
},
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
},
{
value: '/home',
label: '首页'
}
],
searchValue: ''
}
},
methods: {
chickvalue(item) {
alert('value:' + item.value + '|label:' + item.label)
}
}
}
</script>
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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)