(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202211019044.X (22)申请日 2022.08.24 (71)申请人 小马国炬 （玉 溪） 科技有限公司 地址 653100 云南省玉 溪市红塔区玉江大 道玉溪二小区三 号门 (72)发明人 侯佳奇　马黎明　 (74)专利代理 机构 北京集佳知识产权代理有限 公司 11227 专利代理师 林哲生 (51)Int.Cl. G06F 9/451(2018.01) G06F 9/445(2018.01) (54)发明名称 一种基于vue框架的数据展示方法、 装置、 设 备及介质 (57)摘要 本申请公开了一种基于vu e框架的数据展示 方法、 装置、 设备及介质， 涉及计算机技术领域， 包括： 生成第一数组与第二数组， 并调用穿梭框； 穿梭框包括与第一数组对应的第一表格以及与 第二数组对应的第二表格， 第一数组包括待选择 项， 第二数组包括已选择项； 将第一数组中的目 标待选择项添加至第二数组并计算相应的计算 属性， 然后将计算结果渲染至第一表格； 获取筛 选值， 并将 筛选值与待筛选表格进行比对后根据 比对结果计算相应的计算属性， 然后将计算结果 渲染至待筛选表格， 待筛选表格包括第一和/或 第二表格； 当所有目标待选择项添加完成， 则点 击提交， 以便主页面进行数据展 示。 可见， 本申请 能够在不影响待选择项及已选择项的情况下实 现条件筛 选。 权利要求书2页 说明书8页 附图3页 CN 115357325 A 2022.11.18 CN 115357325 A 1.一种基于vue框架的数据展示方法， 其特 征在于， 包括： 生成第一数组与第二数组， 并调用预先封装的穿梭框； 其中， 所述穿梭框包括第 一表格 以及第二表格， 所述第一表格与所述第二表格分别与所述第一数组以及所述第二数组对 应， 所述第一数组中包括待选择项， 所述第二数组中包括已选择项； 将所述第一数组中的目标待选择项添加至所述第二数组中， 并计算相应的计算属性， 然后将计算结果 渲染至所述第一表格； 获取输入框中的目标筛选值， 并将所述目标筛选值与待筛选表格进行比对后， 根据比 对结果计算相应的计算属 性， 然后将计算结果渲染至所述待筛选表格， 所述待筛选表格包 括所述第一表格和/或所述第二表格； 当所有所述目标待选择项添加完成， 则点击提交， 以便主页面对所述穿梭框中的所述 已选择项 进行数据展示。 2.根据权利要求1所述的基于vue框架的数据展示方法， 其特征在于， 所述调用预先封 装的穿梭框之前， 还 包括： 对第一表格组件以及第 二表格组件分别进行封装， 并将封装好的表格组件封装为穿梭 框。 3.根据权利要求1所述的基于vue框架的数据展示方法， 其特征在于， 所述计算相应的 计算属性， 然后将计算结果 渲染至所述第一表格， 包括： 基于过滤操作在所述第 一数组中对所述目标待选择项进行过滤， 并根据过滤结果计算 相应的计算属性， 然后将计算结果 渲染至所述第一表格。 4.根据权利要求1所述的基于vue框架的数据展示方法， 其特征在于， 所述获取输入框 中的目标筛选值， 并将所述 目标筛选值与待筛选表格进行比对后， 根据比对结果计算相应 的计算属性， 然后将计算结果 渲染至所述待筛 选表格， 包括： 获取与所述第一表格对应的第 一输入框 中的目标筛选值， 并将所述目标筛选值与 所述 第一表格进行比对后， 根据比对结果计算相应的计算属 性， 然后将计算结果渲染至所述第 一表格； 和/或， 获取与所述第二表格对应的第二输入框中的目标筛选值， 并将所述目标筛选值 与所述第二表格进行比对后， 根据比对结果计算相应的计算属 性， 然后将计算结果渲染至 所述第二表格。 5.根据权利要求1所述的基于vue框架的数据展示方法， 其特征在于， 所述将所述第一 数组中的目标待选择项添加至所述第二数组中， 并计算相应的计算属 性， 然后将计算结果 渲染至所述第一表格之后， 还 包括： 在所述第 二数组中， 对添加错误的选择项进行删除， 并重新计算相应的计算属性， 然后 将计算结果 渲染至所述第一表格。 6.根据权利要求1所述的基于vue框架的数据展示方法， 其特 征在于， 还 包括： 通过点击所述第 一表格或所述第 二表格中的查询按钮， 查询所述第 一表格或所述第 二 表格中的选择项的信息 。 7.根据权利要求1至6任一项所述的基于vue框架的数据展示方法， 其特征在于， 所述获 取输入框中的目标筛 选值， 包括： 通过vue中的数据双向绑定 机制， 获取输入框中的目标筛 选值。权　利　要　求　书 1/2 页 2 CN 115357325 A 28.一种基于vue框架的数据展示装置， 其特 征在于， 包括： 穿梭框调用模块， 用于生成第一数组与第二数组， 并调用预先封装的穿梭框； 其中， 所 述穿梭框包括第一表格以及第二表格， 所述第一表格与所述第二表格分别与所述第一数组 以及所述第二数组对应， 所述第一数组中包括待选择项， 所述第二数组中包括已选择项； 数据添加模块， 用于将所述第一数组中的目标待选择项添加至所述第二数组中， 并计 算相应的计算属性， 然后将计算结果 渲染至所述第一表格； 条件筛选模块， 用于获取输入框中的目标筛选值， 并将所述目标筛选值与待筛选表格 进行比对后， 根据比对结果计算相应的计算属性， 然后 将计算结果渲染至所述待筛选表格， 所述待筛 选表格包括所述第一表格和/或所述第二表格； 数据展示模块， 用于当所有所述目标待选择项添加完成， 则点击提交， 以便主页面对所 述穿梭框中的所述已选择项 进行数据展示。 9.一种电子设备， 其特 征在于， 包括： 存储器， 用于保存计算机程序； 处理器， 用于执行所述计算机程序， 以实现如权利要求1至7任一项所述的基于vue框架 的数据展示方法。 10.一种计算机可读存储介质， 其特征在于， 用于保存计算机程序； 其中， 所述计算机程 序被处理器执行时实现如权利要求1至7任一项所述的基于vue框架的数据展示方法。权　利　要　求　书 2/2 页 3 CN 115357325 A 3