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);

总结

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

相关文章

  • elementUI select组件使用及注意事项详解

    elementUI select组件使用及注意事项详解

    这篇文章主要介绍了elementUI select组件使用及注意事项详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue项目之数量占比进度条实现方式

    vue项目之数量占比进度条实现方式

    这篇文章主要介绍了vue项目之数量占比进度条实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue数据改变但页面没有变的几种情况及解决方法

    Vue数据改变但页面没有变的几种情况及解决方法

    如果,你发现自己需要在Vue中做一次强制更新,99.99%的情况,是你在某个地方做错了事,所以本文给大家介绍了Vue数据改变但页面没有变的几种情况及解决方法,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • Vue实现页面添加满屏水印和去除水印功能

    Vue实现页面添加满屏水印和去除水印功能

    在一些特殊的应用场景中,可能需要在网页上添加水印以保护版权或标识信息,本文将介绍如何在Vue项目中添加满屏水印并实现去除水印的功能,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-07-07
  • 基于iview-admin实现动态路由的示例代码

    基于iview-admin实现动态路由的示例代码

    这篇文章主要介绍了基于iview-admin实现动态路由的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue实现搜索关键词高亮的详细教程

    vue实现搜索关键词高亮的详细教程

    这篇文章主要为大家介绍了vue实现搜索关键词高亮的详细教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue video和vue-video-player实现视频铺满教程

    vue video和vue-video-player实现视频铺满教程

    这篇文章主要介绍了vue video和vue-video-player实现视频铺满教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    这篇文章主要介绍了解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,需要的朋友可以参考下
    2019-10-10
  • 如何实现无感刷新token

    如何实现无感刷新token

    这篇文章主要介绍了如何实现无感刷新token,当token过期的时候,刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知,避免频繁登录。下面我们大家一起进入文章看看实现思路即详细内容,需要的朋友可以参考一下
    2021-11-11
  • vue.js+Element实现表格里的增删改查

    vue.js+Element实现表格里的增删改查

    本篇文章主要介绍了vue.js+Element实现增删改查,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01

最新评论