vue elementUI select下拉框如何设置默认值

 更新时间:2023年10月08日 09:15:31   作者:_揽  
这篇文章主要介绍了vue elementUI select下拉框如何设置默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue elementUI select下拉框设置默认值

关于element select框默认值赋值不成功问题,注意两点:

v-model里面的数据和遍历出来value值数据类型不一样。!!!!

(例:item.provinces类型是number,province类型是String。类型不一样导致赋值不成功)

遍历数据和赋值的先后顺序,必须保证数据先遍历后赋值。!!!

要为select下拉框设定默认值,只需要把  v-model  绑定的值和你想要选中  option  的  value  值设置一样即可。

下面上代码:

html部分代码:

<el-select v-model="valuetype"  @change="changetype">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
</el-select>
export default {
        data() {
            return {
                options: [
                    {
                        value: 'all',
                        label: '全部'
                    },
                    {
                        value: 'model',
                        label: '型号'
                    },
                    {
                        value: 'machine',
                        label: '机器'
                    }
                ],
                valuetype: 'all',
            };
        },
     }

vue element-ui select 多选默认值

编辑需要设置默认值

<div class="add_item active">
            <div class="add_name"> 参与者:</div>
            <div class="add_input">
              <el-select v-model="edituser_ids" multiple  filterable placeholder="请选择">
                <el-option v-for="item in addOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

接口返回的格式是1,2这样的字符串 需要转换为数组格式 但是转换为数组里的值还是字符串格式 select默认以为是显示的内容

解决方法

this.editmain_user_ids = res.data.data.main_user_ids.split(',').map(Number);

总结

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

相关文章

  • vue2中的el-select组件数据太多,如何实现滚动加载数据效果

    vue2中的el-select组件数据太多,如何实现滚动加载数据效果

    这篇文章主要介绍了vue2中的el-select组件数据太多,如何实现滚动加载数据效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Vue3实现组件二次封装的小技巧分享

    Vue3实现组件二次封装的小技巧分享

    组件的二次封装:保留组件已有的功能,需要重写组件方法,当组件已有大量功能时候,则需要重写很多重复代码,且组件功能进行修改的时候,封装的组件也需要对应修改,从而造成许多开发和维护成本,本文给大家分享了Vue3实现组件二次封装的小技巧,需要的朋友可以参考下
    2024-09-09
  • 解决Element ui导航栏选中背景色刷新消失的问题

    解决Element ui导航栏选中背景色刷新消失的问题

    这篇文章主要介绍了解决Element ui导航栏选中背景色刷新消失的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 图文介绍Vue父组件向子组件传值

    图文介绍Vue父组件向子组件传值

    本文通过实例代码给大家详细分享了Vue父组件向子组件传值的过程以及关键点讲解,一起学习参考下吧。
    2018-02-02
  • vue+elementui 对话框取消 表单验证重置示例

    vue+elementui 对话框取消 表单验证重置示例

    今天小编就为大家分享一篇vue+elementui 对话框取消 表单验证重置示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue中使用stylus报错的解决

    Vue中使用stylus报错的解决

    如果你也和我一样,按照正常的流程下载并且配置了stylus,但是依旧报错,也许这篇文章就是你的菜,一起来看看吧
    2022-08-08
  • vue中el-date-picker type=daterange日期清空时不回显的解决

    vue中el-date-picker type=daterange日期清空时不回显的解决

    这篇文章主要介绍了vue中el-date-picker type=daterange日期清空时不回显的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue 引入公共css文件的简单方法(推荐)

    vue 引入公共css文件的简单方法(推荐)

    下面小编就为大家分享一篇vue 引入公共css文件的简单方法(推荐),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • vite5+vue3+ import.meta.glob动态导入vue组件图文教程

    vite5+vue3+ import.meta.glob动态导入vue组件图文教程

    import.meta.glob是Vite提供的一个特殊功能,它允许你在模块范围内动态地导入多个模块,这篇文章主要给大家介绍了关于vite5+vue3+ import.meta.glob动态导入vue组件的相关资料,需要的朋友可以参考下
    2024-07-07
  • Vue组件开发技巧总结

    Vue组件开发技巧总结

    这篇文章通过代码示例给大家详细分析了Vue组件开发的相关技巧以及知识点,对此有需要的读者们参考下吧。
    2018-03-03

最新评论