el-select获取选中项的所有信息

最新推荐文章于 2024-03-15 17:13:54 发布

菜同学

最新推荐文章于 2024-03-15 17:13:54 发布

阅读量6k

点赞数 1

分类专栏： Vue 常见问题 elementUI 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_41530816/article/details/125167815

版权

常见问题同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

Vue

13 篇文章 1 订阅

订阅专栏

elementUI

6 篇文章 0 订阅

订阅专栏

以前都是拿到当前选中项的 id 然后遍历数组比对id 拿到当前选项的所有数据原来 elementUI 中已经设置了可以获取 el-select 选中项所有信息的属性 el-select 上设置属性 value-key 一定要设置，不然会报错 1、单选时不设置 value-key 属性，选项会全部选中

2、多选时不设置 value-key，报错

el-option 上绑定的 key 值为它本身的数据 item

<el-select v-model="form.address" value-key="id" @change="handleChange($event)">
  <el-option v-for="item in addressArr" :key="item.id" :label="item.address" :value="item"></el-option>
</el-select>

<script>
  data() {
    return {
      form: {
        address: {}
      },
      addressArr: [
        {
          id: 1,
          address: '北京市朝阳区十里河'
        },
        {
          id: 2,
          address: '北京市昌平区沙河'
        }
      ]
    }
  },
  methods: {
    handleChange(event) {
      console.log(event)
    }
  }
</script>