一种用于ElementUI表单与列表联动控制的方法技术

本发明专利技术公开了一种用于ElementUI表单与列表联动控制的方法，包括步骤：当勾选多选列表时，将所选数据保存到中间变量（已选项数据），并同步到表单数据；当对表单数据进行删除操作时，需对中间变量进行相应地操作，然后再对列表内容的选中状态进行更新操作，如果删除的不是当前页数据，则调用toggleRowSelection方法切换列表该行数据的选中状态无效，此时需要在切换列表分页时重新对列表的选中状态进行相应地设置。本发明专利技术通过比较当前页列表数据与已勾选项数据，实现应用程序中表单与所选列表相互联动控制。互联动控制。互联动控制。

【技术实现步骤摘要】
一种用于ElementUI表单与列表联动控制的方法


[0001]本专利技术涉及物联网软件平台开发
，具体涉及一种用于ElementUI表单与列表联动控制的方法。

技术介绍

[0002]在众多的UI组件库中，基于Vue2.0封装的ElementUI受到广大开发者的青睐。随着业务场景的增加，ElementUI的基本组件已无法满足更丰富的数据交互，这就需要我们在ElementUI基本组件的基础上，增加多种使用方法，使其更加适合我们的应用程序。
[0003]已有的ElementUI多选列表组件在设置reserve
‑
selection（仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据“需指定 row
‑
key”）属性为true后，就可得到分页下的所有已选项数据，但当我们想把列表的已选项数据与表单数据关联起来相互联动时，会发现单纯的调用toggleRowSelection方法来切换某一行的选中状态时会出现无效的问题，且在多种复杂操作下本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种用于ElementUI表单与列表联动控制的方法，其特征在于：所述方法包括如下步骤：步骤S1，在template标签中编写表单项为el
‑
select多选组件，并设置focus事件与移除tag的remove
‑
tag事件；弹窗中的列表el
‑
table为多选列表，列表数据为tableData，并设置row
‑
key属性，将type=selection列的reserve
‑
selection属性设置为false，给列表添加单选select事件handleSelect和全选select
‑
all事件handleSelectAll；步骤S2，编写单选select事件handleSelect和全选select
‑
all事件handleSelectAll，并且单选select事件和全选select
‑
all事件处理完成后均同步更新表单数据；单选select事件具有两个参数selection和row，通过判断当前操作项row是否存在于入参selection中来区分该操作是选中操作还是去除勾选操作，存在则表示是选中操作，不存在则表示去除勾选操作；全选select
‑
all事件具有一个参数selection，通过判断入参selection的长度是否为0来区分是全选中操作还是去除勾选操作，如果入参selection的长度为0，则表示去除勾选操作，如果其长度大于0，则表示全选中操作；步骤S3，编写操作表单数据联动列表方法，对表单数据进行删除，首先删除中间变量中存在的该项，然后同步列表的选中状态。2.根据权利要求1所述的用于ElementUI表单与列表联动控制的方法，其特征在于：所述步骤S1...

【专利技术属性】
技术研发人员：王妮，宋佳倩，孙利民，杜利达，陈志强，刘培培，李然，张翠芳，
申请(专利权)人：河钢数字技术股份有限公司，
类型：发明
国别省市：