一种用于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方法来切换某一行的选中状态时会出现无效的问题，且在多种复杂操作下产生难以预料的结果，这样就无法实现表单与列表操作联动控制的功能。

技术实现思路

[0004]本专利技术要解决的技术问题是提供一种用于ElementUI表单与列表联动控制的方法，通过比较当前页列表数据与已勾选项数据，实现应用程序中表单数据与所选列表相互联动控制。
[0005]为解决上述技术问题，本专利技术的内容包括：一种用于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，编写操作表单数据联动列表方法，对表单数据进行删除，首先删除中间变量中存在的该项，然后同步列表的选中状态。
[0006]进一步的，所述步骤S1中，focus事件触发时显示弹窗列表，remove
‑
tag事件触发时删除中间变量中对应的项以及同步弹窗列表的选中状态。
[0007]进一步的，所述步骤S1中，单选select事件为当用户手动勾选数据行的 Checkbox 时触发的事件，全选select
‑
all事件为当用户手动勾选全选 Checkbox 时触发的事件。
[0008]进一步的，所述步骤S2中，编写单选select事件时，选中操作下将该条数据添加到中间变量this.selectedDeviceList，去除勾选操作下将该条数据从中间变量中删除。
[0009]进一步的，所述步骤S2中，编写全选select
‑
all事件时，对列表的当前页数据进行遍历，如果是全选中操作，在对列表当前页数据进行遍历时，要逐一判断每一项是否已经存在于已选的中间变量，不存在时将其添加到中间变量，存在则不作处理；如果是去除勾选操作，在对列表当前页数据进行遍历时，要逐一判断当前项是否存在于已选的中间变量中，存在时将其从中间变量中删除，不存在则不作处理。
[0010]进一步的，所述步骤S3中，当对表单数据进行删除时，先判断该删除项是否是列表当前页数据，如果是当前页数据，则要对该列表的当前页数据进行遍历，不存在于中间变量并且是当前删除项数据时调用toggleRowSelection方法将选中状态设置为false；如果不是当前页数据，则在切换列表分页时对列表的选中状态进行重新设置，将需要选中的项调用toggleRowSelection方法设置为true。
[0011]本专利技术的有益效果是：解决ElementUI列表组件无法处理非本页已选数据的选中状态问题，实现表单数据与多选列表相互联动控制的功能。
附图说明
[0012]图1是本专利技术实施例流程图；图2是本专利技术实施例表单图；图3是本专利技术实施例弹窗列表图；图4是本专利技术实施例弹窗列表关联表单图。
具体实施方式
[0013]为便于理解本专利技术，下面结合附图和具体实施方式对本专利技术作进一步详细的说明。本领域技术人员应该明了，所述实施例仅仅是帮助理解本专利技术，不应视为对本专利技术的具体限制。
[0014]如图1所示，本专利技术提供了一种用于ElementUI表单与列表联动控制的方法，包括如下步骤：步骤S1，在template标签中编写表单项为el
‑
select多选组件，并设置focus事件与移除tag的remove
‑
tag事件，focus事件触发时显示弹窗列表，remove
‑
tag事件触发时删除中间变量中对应的项以及同步弹窗列表的选中状态；弹窗中的列表el
‑
table为多选列表，列表数据为tableData，并设置row
‑
key属性，将type=selection列的reserve
‑
selection属性设置为false，给列表添加单选select事件handleSelect和全选select
‑
all事件handleSelectAll。效果图如图2、3所示。
[0015]表单项可以是el
‑
select多选组件，也可以是el
‑
tag可移除组件。单选select事件
为当用户手动勾选数据行的Checkbox时触发的事件，全选select
‑
all事件为当用户手动勾选全选Checkbox时触发的事件。
[0016]步骤S2，编写单选select事件handleSelect和全选select
‑
all事件handleSele本文档来自技高网...

【技术保护点】

【技术特征摘要】
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...

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