vue elementUI select下拉框设置默认值

旧城等待， 2023-10-09 14:25 15阅读 0赞

关于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',
                };
            },
         }

![08027a8b8f2e4c2e88675b280b1e7180.png][]

[08027a8b8f2e4c2e88675b280b1e7180.png]: https://img-blog.csdnimg.cn/08027a8b8f2e4c2e88675b280b1e7180.png

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 select设置默认文字，不出现在下拉框中

场景在实现新增和编辑时，初次进入页面需要显示默认文字，监听下拉框的改变的事件实现联动，所以在新增时必须要让其选择。实现 <select class="

川长思鸟来/ 2023年10月18日 20:09/ 0 赞/ 43 阅读

相关 vue elementUI select下拉框设置默认值

关于element select框默认值赋值不成功问题，注意两点： v-model里面的数据和遍历出来value值数据类型不一样。！！！！（例：item.provinc

旧城等待，/ 2023年10月09日 14:25/ 0 赞/ 16 阅读

相关 vue的select下拉框宽度的设置

前几天使用vue-element-admin框架开发了一个简单的后台管理系统，在开发的过程之中也遇到了一些功能，以及对饿了么框架的使用遇到的一些问题，如何解决问题，记录一下。

小咪咪/ 2023年01月06日 01:12/ 0 赞/ 483 阅读

相关 vue渲染select下拉框的值

关于一些经常用到的参考文档：这里都罗列一下,查找起来比较方便 Element UI手册：[https://cloud.tencent.com/developer/doc/12

雨点打透心脏的1/2处/ 2022年11月07日 05:50/ 0 赞/ 209 阅读

相关 vue渲染select下拉框的值

关于一些经常用到的参考文档：这里都罗列一下,查找起来比较方便 Element UI手册：[https://cloud.tencent.com/developer/doc/12

逃离我推掉我的手/ 2022年11月05日 11:48/ 0 赞/ 203 阅读

相关 vue提交select下拉框选中的值

写在前面的而一些啰嗦的话: vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。 Star指数：69.7k G

墨蓝/ 2022年09月05日 04:09/ 0 赞/ 232 阅读

相关 vue提交select下拉框选中的值

例子 <template> <div class="tab-container"> <div class="filter-containe

向右看齐/ 2022年08月29日 09:39/ 0 赞/ 194 阅读

相关遍历select下拉框的值（设置默认值）

遍历select下拉框的值问题：想判断如果传入的值operaVal等于下拉框的某一项的值，则设置这行为选中。方法：1.先得到select框的所有

迈不过友情╰/ 2022年05月29日 09:49/ 0 赞/ 262 阅读

相关 layui下拉框赋默认值

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="vie

素颜马尾好姑娘i/ 2021年09月23日 08:10/ 0 赞/ 807 阅读

相关 JS如何给下拉框设置默认值？

JS如何给下拉框设置默认值？首创建一个标准的HTML5文档；

红太狼/ 2020年06月18日 16:29/ 0 赞/ 984 阅读