Vue+Element+Select获取选中的对象，获取select当前选中的所有内容

最新推荐文章于 2023-12-05 16:44:29 发布

吃不胖爹

最新推荐文章于 2023-12-05 16:44:29 发布

阅读量1.7k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_43894292/article/details/125410415

版权

js 同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

vue

36 篇文章 1 订阅

订阅专栏

本文展示了如何在Vue.js中创建一个过滤搜索的下拉选择组件，使用v-model进行双向数据绑定，通过@change事件监听选中项的变化，并获取选中项的code和label属性。示例代码包括了选项数据结构及事件处理函数currentSel。

摘要由CSDN通过智能技术生成

<el-select v-model="value8" filterable placeholder="请选择" value-key="id" @change="currentSel">
   <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"></el-option>
</el-select>

options: [
        {
          value: "选项1",
          id: 1,
          code: "xuanxiang1",
          label: "黄金糕"
        },
        {
          code: "xuanxiang2",
          id: 2,
          value: "选项2",
          label: "双皮奶"
        },
        {
          id: 3,
          value: "选项3",
          code: "xuanxiang3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          id: 4,
          code: "xuanxiang4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭",
          id: 5,
          code: "xuanxiang5"
        }
      ],

 currentSel(selVal) {
       this.code = selVal.code;
       this.name = selVal.label;
       console.log("选择的name为：" + this.name, "选择的code为:" + this.code);
       console.log(selVal);
     },