关于elementUI select控件绑定多个值(对象)

更新时间：2023年04月05日 15:44:20 作者：A873054267

这篇文章主要介绍了关于elementUI select控件绑定多个值(对象)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

elementUI select控件绑定多个值

通常使用的时候v-model都是绑定一个值，这样没有问题，但在某些需求中会获取选择项的多个值。

那么v-model就需要绑定一个对象，e饿了么的官网说明了绑定对象的时候必须绑定value-key值，否则会出现选择项无法改变的情况。

value-key可以使用选择项中的值。

当时没有看文档的时候，自己也想了一个办法，就是绑定选择项的索引值，然后到对应的nameList数组中取出对应的项也可以。

el-select绑定多个值id、value

el-select通常v-model绑定一个form的表单属性，但是在给后台传值的时候，往往在选择了以后，不仅要传name也要传id，所以需要考虑其他办法。

原v-model绑定方法：选中的值绑定form.serviceTypeName，但无法获取id

<el-form-item label="项目分类" prop="serviceTypeName">
    <el-select v-model="form.serviceTypeName" placeholder="请选择">
        <el-option
            v-for="item in classifiyOptions"
            :key="item.serviceTypeId"
            :label="item.serviceTypeName"
            :value="item.serviceTypeName"
         />
     </el-select>
</el-form-item>

改进方法：通过绑定index，@input绑定事件作用于多个值

改进后：

<el-form-item label="项目分类" prop="serviceTypeName">
    <el-select 
        v-model="form.serviceTypeName"
        @input="selectChangeParent"
        placeholder="请选择"
     >
         <el-option
             v-for="(item, index) in classifiyOptions"
            :key="index"
            :label="item.serviceTypeName"
            :value="index"
         />
    </el-select>
</el-form-item>

selectChangeParent方法:

// 新增绑定id函数
    selectChangeParent(index) {
      this.form.serviceType = this.classifiyOptions[index].serviceTypeId;
      this.form.serviceTypeName = this.classifiyOptions[index].serviceTypeName;
    },

这样就实现了select组件绑定多个值：id和name

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Element实现动态增加多个输入框并校验
本文主要介绍了Element实现动态增加多个输入框并校验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
Vue 2.0入门基础知识之内部指令详解
这篇文章主要介绍了Vue 2.0入门基础知识之内部指令知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下
2017-10-10
UniApp中实现类似锚点定位滚动效果
一个uniapp小程序的项目,我们需要实现一个非常实用的功能——类似于锚点定位的交互效果,即在首页中有多个tab（分类标签）,每个tab对应着不同的模块,当用户点击某个分类的tab时,需要流畅地滚动到对应的内容位置,提供更好的用户体验,
2023-10-10
解决vue多个路由共用一个页面的问题
下面小编就为大家分享一篇解决vue多个路由共用一个页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue+Element-ui表单resetFields无法重置问题
本文主要介绍了Vue+Element-ui表单resetFields无法重置问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
vue 添加vux的代码讲解
通过命令npm install vux --save添加vux，在相关配置文件中配置信息，具体代码添加方法，大家参考下本文
2017-11-11
浅析Vue中生命周期函数的区别
生命周期分为四个对子，根据不同的情况使用不同的函数，这篇文章主要为大家介绍了这些函数的使用与区别，感兴趣的小伙伴可以了解一下
2023-08-08
关于Vue的 Vuex的4个辅助函数
这篇文章主要介绍了关于Vue的 Vuex的4个辅助函数,辅助函数的好处就是帮助我们简化了获取store中state、getter、mutation和action,下面我们一起来看看文章具体的举例说明吧，需要的小伙伴也可以参考一下
2021-12-12
vue中使用axios请求post接口发送两次
这篇文章主要为大家介绍了vue中使用axios请求post接口,请求会发送两次原因解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
详解vue中父子组件传递参数props的实现方式
这篇文章主要给大家介绍了在vue中，父子组件传递参数 props 实现方式，文章通过代码示例介绍的非常详细，对我们的学习或工作有一定的参考价值,需要的朋友可以参考下
2023-07-07