脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue elementUI select下拉框设置默认值

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

总结

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

您可能感兴趣的文章:

相关文章

最新评论