element-ui的el-select多选同时获取label与value值_el-select 多选的label如何获取-优快云博客

本文链接：https://blog.youkuaiyun.com/wuningw/article/details/144658612

直接上代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 引入 Element UI 的 CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>测试</title>
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 引入 Element UI 的 JS -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>

    <div id="app">
        <!-- 使用 Element UI 组件 -->
        <template>
            <el-select v-model="valueData" filterable multiple @change="handleChange" placeholder="请选择"
                style="width: 300px;" ref="labelSelect">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </template>
    </div>

</body>

<script type="text/javascript">
    // 全局引入Element UI
    Vue.use(ELEMENT);
    new Vue({
        el: '#app',
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                valueData: [],
                label: '',
                valueLabel: [],
                valueListSelected: []
            }
        },
        mounted() {
            this.valueData = ["选项1", "选项2"];
        },

        methods: {
            // 你的方法
            handleChange(data) {
                this.$nextTick(() => {
                    let labelSelect = this.$refs.labelSelect;
                    console.log(labelSelect, '==========arr===========')
                    let arr = this.$refs.labelSelect.selected
                    console.log(arr, '==========arr===========')
                    for (let i = 0; i < arr.length; i++) {
                        console.log(arr[i].label, arr[i].value)
                    }
                })
            },
        }
    });
</script>

</html>

主要利用到 this.$nextTick这个实例方法获取更新的dom元素的回调，this.$refs.labelSelect获取组件的属性。记得先在组件添加ref="labelSelect"， labelSelect可以自定义。