vue element UI select 下拉选项获取当前选中的值

最新推荐文章于 2024-02-26 15:11:42 发布

原创最新推荐文章于 2024-02-26 15:11:42 发布 · 4.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在Vue框架中实现下拉选择框组件的方法，包括如何使用v-model双向绑定，@change事件监听，以及通过v-for遍历数据源渲染选项。同时，展示了如何在选择变化时获取当前选中项的详细信息。

<template>
    <div>
        <el-select v-model="current" @change="test"
                    placeholder="呵呵">
            <el-option
                    v-for="item in list"
                    :key="item.rid"
                    :label="item.id"
                    :value="item.rid">
            </el-option>
        </el-select>
    </div>
</template>


<script>
    export default {
        data () {
            return {
                list: [{ id: 1, rid: 123 }, { id: 2, rid: 456 },{ id: 3, rid: 7777 }],
                current:''
            }
        },
        methods: {
            test (e) {
                console.log("hehew");
                var that = this
                var hh = that.list.filter(function (c, i, a) {//第一个参数为当前项,第二个参数为索引,第三个为原值
                    if (c.rid == that.current) {
                        return c
                    }
                })
                var dd = hh[0].rid //获取当前option的rid的值
                console.log("dd:",dd)
            }
        }
    }
</script>


<style lang='scss' scoped>
</style>