资讯专栏INFORMATION COLUMN

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

kaka / 1668人阅读

摘要:关于的多选,数据回显的问题在工作中遇到这样一个问题,新建表单时用的多选以后,在编辑的时候打开表单发现其他数据能正常显示,多选却无法正常回显。这样多选器里的数据就能正常返显了。

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

在工作中遇到这样一个问题,新建表单时用element的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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101868.html

相关文章

  • element ui中select多选回显之后不能正常编辑

    摘要:由于项目需求,在项目中使用用到了中的组件的多选功能,多选之后保存回显所选内容,从后端会拿到一个数组,然后我把这个数组赋值给前端多选对应的数组,这样多选的数据可以正常显示问题是回显之后不能正常编辑,点击删除小图标也失效解决方法采用事件在事件中 由于项目需求,在项目中使用用到了element中的select组件的多选功能(multiple),多选之后保存回显所选内容,从后端会拿到一个数组,...

    dockerclub 评论0 收藏0
  • 解决mybatis通用mapper使用UUID作为主键无法回显问题

    摘要:解决通用无法回显的问题首先给大家推荐一个非常好的插件网站,使用的各位可以到这个网站来看一下插件。通用配置问题解决,如有疑问请查文档,在上面的插件官网中有。 解决通用mapperUUID无法回显的问题            首先给大家推荐一个非常好的Mybatis插件网站http://mybatis.tk/,使用Mbatis的各位可以到这个网站来看一下Mybatis插件。        ...

    褰辩话 评论0 收藏0
  • 关于element级联选择数据回显问题

    摘要:级联选择器数据回显问题对于前端小菜鸡来说,被这个问题也是困扰了好久。也是百度的方法。 element级联选择器数据回显问题 对于前端小菜鸡来说,被这个问题也是困扰了好久。也是百度的方法。表单部分代码: data中定义: depShowType:{ value:id, label:name, children:nodes }, SelectdeptId:[], metho...

    SolomonXie 评论0 收藏0
  • 复选框回显 选用prop()不用attr()

    设置一个复选框回显示使用attr()添加checked属性但是在回显的过程中会使复选框出现混乱的情况有一些并没有回显如果给他添加一个checked的class就会导致复选框不可点击这种做法是不对的需要用prop替代 function updateCheckboxState(data, type) { var elType = type ?...

    Olivia 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<