使用element ui select下拉框多选，编辑状态下回显数据

最近在做一个项目,项目的后端是地址:https://github.com/wangyuanjun008/wyj-springboot-security.git
前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶
在项目中使用的是 element ui 组件库，在使用select多选下拉框时，编辑页面不知道怎么为其赋值回显数据。
下拉框的代码如下:

<el-form-item label="可选角色"><el-select v-model="commonForm.roles" multiple placeholder="请选择"><el-option v-for="item in rolesItems" :key="item.id" :label="item.text" :value="item.id" ></el-option></el-select>
</el-form-item>

猜想:
多选下拉框是多条数据，将数据放到数组里面，将数据赋值给多选下拉框，就会有效果。

验证:
将多选数据以数组的形式从后台返回到前台，后台字段类型是List
返回结果如下:

查看页面多选回显数据成功

参考地址: https://github.com/wangyuanjun008/wyj-vue-security/blob/master/src/view/user/user.vue

使用element ui select下拉框多选，编辑状态下回显数据相关推荐

Element UI select 下拉框样式覆盖
因为我需要写一个大屏页面,然后需要用到select框,我想把select下拉选项的背景颜色改成透明,然后我想覆盖掉它本身的样式.我本来想改变el-select-dropdown的样式,即使使用了 /d ...
解决element ui select下拉框不回显数据问题
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://githu ...
element UI select下拉选项位置问题
element UI select下拉选项位置问题在使用elementUI下拉选项时,可能存在下拉时下拉列表选项框的位置距离下拉框所在的位置距离过大,这个是由于elementUI自己设置的根据下拉框 ...
Vue实现Element UI的下拉框默认选中，值来自父组件或异步获取
子组件使用watch监听父组件传过来的值,并且赋值给子组件的data参数. 1.父组件传了一个userId属性给子组件 <Children@searchForm="searchForm ...
记一次jquery: select下拉框默认设置选中项（利用数据回显）
1. 用selected属性默认增加选中项: <select name="" id=""><option value="1" ...
select下拉框多选，超级好用！十分强大！
正文: 先说点废话:一个需求,想把select变成下拉多选,网上查找了半天,给出的方案都是自定义一个标签,或者弄个什么ul下面li进行选择,看起来就繁琐,本人只想在select上面做文章,不得已,自己 ...
element 中select下拉框和el-popover下拉框位置偏移的情况
出现改问题的原因是下拉的定位信息在body中,只需要将定位置于父组件即可解决. <el-select :teleported="false" v-model="d ...
bootstra select 下拉框多选，搜索效果
此处采用bootstrap-select插件,引入css和js bootstrap-select.css bootstrap-select.js bootstrap-select.min.css ...
select 下拉框的选中项的change事件
HTML文件<span style="float: left;">类型: <select id="type" class=&qu ...

使用element ui select下拉框多选，编辑状态下回显数据

使用element ui select下拉框多选，编辑状态下回显数据相关推荐

最新文章

热门文章