Vue element-UI el-select循环选中的问题

更新时间：2022年10月22日 08:48:26 作者：疯狂的代码奴

这篇文章主要介绍了Vue element-UI el-select循环选中的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

element-UI el-select循环选中问题

由于使用el-checkbox-group多选框循环包围着同一个下拉框，导致下拉框选中后无法正常回显

@change="$forceUpdate()"

这里使用了$forceUpdate()，使其强制更新视图，下面是我的源码

<el-checkbox-group v-for="(item,index) in getMonitorAdd" :key='index' v-model="item.userId" >
    <el-checkbox >{{item.userName}}</el-checkbox>
    <el-select v-model="item.arr" @change="$forceUpdate()" placeholder="请选择">
        <el-option v-for="items in userTypeSel" :key="items.id" :label="items.code" :value="items.value"></el-option>
    </el-select>
</el-checkbox-group>

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

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

您可能感兴趣的文章:

在Vue中使用echarts的实例代码（3种图）
本篇文章主要介绍了在Vue中使用echarts的实例代码（3种图），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
vue-cli如何添加less 以及sass
本篇文章主要介绍了vue-cli如何添加less 以及sass，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
vue实现钉钉的考勤日历
这篇文章主要为大家详细介绍了vue实现钉钉的考勤日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
vue3如何实现挂载并使用axios
这篇文章主要介绍了vue3如何实现挂载并使用axios，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
uni-app vue3接口请求封装示例代码
uni-app是一个使用Vue.js开发的多端开发框架,下面这篇文章主要给大家介绍了关于uni-app vue3接口请求封装的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
vue安装less-loader依赖失败问题及解决方案
这篇文章主要介绍了vue安装less-loader依赖失败问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue新手指南之创建第一个vue-cli脚手架程序
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章主要给大家介绍了关于Vue新手指南之创建第一个vue-cli程序的相关资料,需要的朋友可以参考下
2021-05-05
vue项目中将element-ui table表格写成组件的实现代码
这篇文章主要介绍了vue项目中将element-ui table表格写成组件的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-06-06
vue实现商城秒杀倒计时功能
这篇文章主要介绍了vue实现商城秒杀倒计时功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-12-12
详解vue中v-model的实现原理
v-model可以实现数据的双向绑定,也是vue的最突出的优势,其实 v-model 实际上是一个语法糖,本文将给大家介绍一下vue中v-model的实现原理,文中有相关的代码供大家参考,具有一定的参考价值,需要的朋友可以参考下
2023-12-12