关于element的select多选选择器，数据回显的问题

关于element的select多选，数据回显的问题

在工作中遇到这样一个问题，新建表单时用element的select多选以后，在编辑的时候打开表单发现其他数据能正常显示，多选却无法正常回显。在网上找了很多后，终于解决了这个问题，下面把百度的方法总结一下。

首先：表单中

<el-selectv-model="textForm.receDeptIds"multiplefilterableallow-createdefault-first-optionplaceholder="请选择接收部门"><el-optionv-for="item in deptData":key="item.id":label="item.name":value="item.id"></el-option>
</el-select>

其次，methods中这样写：

// 编辑
handleEdit(data){
this.textShow=true;
this.textForm=data;
this.changeSelect(data);   //触发此方法
},changeSelect(data){
let UserIds=data.receUserIds.toString();
let peoData=UserIds.split(',');
for(var i=0;i<peoData.length;i++)
{peoData[i]=parseInt(peoData[i]);
}
this.textForm.receUserIds=peoData;
let DetptIds=data.receDeptIds.toString();
let dpData=DetptIds.split(',');
for(var i=0;i<dpData.length;i++)
{dpData[i]=parseInt(dpData[i]);
}
this.textForm.receDeptIds=dpData;
},

总结：changeSelect方法是在打开编辑表单后，对select多选选择器返显内容作处理的方法。
定义数组UserIds，将拿到的数据先做一个toString后再赋值给UserIdS（不这样做，直接赋值的话，控制台会一直报split不是一个函数的错误）。
用split方法将UserIds转换为逗号分隔的数组，对peoData作循环操作，每个元素去除双引号（parseInt方法转一下就好）。最终赋值给receUserIds。这样多选器里的数据就能正常返显了。
最后，真的感谢万能的网友。

关于element的select多选选择器，数据回显的问题相关推荐

vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决)
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) 参考文章: (1)vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) (2)ht ...
关于ElementUI的CheckBox多选框数据回显
我们经常需要进行多选框checkbox的数据回显例如上图,需要回显已选的数据. 因为ElementUi已经对代码进行了封装,如下代码示例: <el-checkbox-group v-model ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
解决element ui select下拉框不回显数据问题
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://githu ...
Select2数据回显
<select class="dggui-select" name="placeOrderUserId" id="placeOrderUserI ...
Cascader 级联选择器如何根据给定的叶节点值设置默认值（数据回显）
转载自:Cascader 级联选择器如何设置默认值(数据回显)_༺举个栗子吧༻的博客-CSDN博客_选择器设置默认值官网cascader:https://element.eleme.cn/#/zh- ...
记一次jquery: select下拉框默认设置选中项（利用数据回显）
1. 用selected属性默认增加选中项: <select name="" id=""><option value="1" ...
html+单选+回显,VUE+elementUI表格多选框实现单选以及数据回显时toggleRowSelection失效问题...
一.多选框单选 > @select-all="onSelectAll" 全选是触发的事件 @selection-change="selectItem" 单 ...
vue表格刷新数据_vue+element-ui实现表格某个数据弹窗添加数据，保存后数据更新，再次打开弹窗，数据回显...
实现功能: 1.生成数据插入table 2.修改table的某个数据,保存后该数据进行更新 3.点击table的btn,选择的数据仍是选中状态,数据回显示例-1-选择地址插入表格示例-2-选择指定 ...

关于element的select多选选择器，数据回显的问题

关于element的select多选，数据回显的问题

关于element的select多选选择器，数据回显的问题相关推荐

最新文章

热门文章