element-ui的el-select多选同时获取label与value值

直接上代码：

<!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 UIVue.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.selectedconsole.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可以自定义。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/890423.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！