element el-select change事件传 item 对象方法

alokka

已于 2023-07-11 19:35:18 修改

阅读量2.4w

点赞数 4

分类专栏： element 文章标签： vue.js javascript 前端

于 2021-07-05 01:01:37 首次发布

本文链接：https://blog.csdn.net/alokka/article/details/118471441

版权

element 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

在 el-option 里，我们传入 item 对象，然后在 el-select 中，我们用 value-key 指定唯一标识，这样我们直接调用 change 方法就可以直接传入整个 item 对象，上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
</head>

<body>
    <div id="app">
        <el-select v-model="value" placeholder="请选择" value-key="value" @change="changeSelect">
            // value-key="value" 必须是item里的一个属性
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">
            </el-option>
        </el-select>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }],
                    value: ''
                }
            },
            methods: {
                changeSelect(val) {
                    console.log(val)
                }
            }
        });
    </script>
</body>

</html>

alokka

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
element el-select change事件传 item 对象方法

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。在 el-option 里，我们传入 item 对象，然后在 el-select 中，我们用 value-key 接收，这样我们直接调用 change 方法就可以直接传入整个 item 对象，上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na.
复制链接

扫一扫

专栏目录