[发明专利]基于VUE的级联面板组件动态切换展示数据的方法

说明书

本发明涉及web前端开发领域，具体涉及一种基于VUE的级联面板组件动态切换展示数据的方法，运用VUE父子通信解决方案，将树形数据结构数据转化为对象数组，并将转化后的对象数组处理后用VUE模板加以展示以及设置相关编辑功能，达到动态切换展示数据的效果。技术方案概括为，将树形结构数据转化为对象数组数据，根据面板组件标题数组的长度使用VUE模板绘制多个带有标题的面板子组件，将对象数组数据填充至面板子组件，与面板组件形成级联面板组件，根据VUE父子通信解决方案设置级联面板组件动态切换展示数据的功能。本发明适用于基于VUE的可编辑级联面板组件。

技术领域

本发明涉及web前端开发领域，具体涉及一种基于VUE的级联面板组件动态切换展示数据的方法。

背景技术

单就基于VUE的级联面板组件来说，目前前端开发领域有很多优质的解决方案，各种UI框架中都有类似组件。但是大多数解决方案都是用于树形数据展示及选择，或仅能展示树形数据，或在展示树形数据的同时可以选择(单选或多选)数据。其缺陷在于，只能展示或选择数据，不能根据需要动态变更数据。到目前为止，还没有发现基于VUE的可动态编辑级联面板组件。究其原因，一方面是因为较高的数据处理技术门槛，另一方面也是因为该组件所具备的功能在日常网站项目中不是特别常见。

发明内容

本发明的目的是提供一种基于VUE的级联面板组件动态切换展示数据的方法，运用VUE父子通信解决方案，将树形数据结构数据转化为对象数组，并将转化后的对象数组处理后用VUE模板加以展示以及设置相关编辑功能，达到动态切换展示数据的效果。

本发明采取如下技术方案实现上述目的，基于VUE的级联面板组件动态切换展示数据的方法，包括：

步骤(1)、将树形结构数据转化为对象数组数据；

步骤(2)、根据面板组件标题数组的长度使用VUE模板绘制多个带有标题的面板子组件；

步骤(3)、将对象数组数据填充至面板子组件，与面板组件形成级联面板组件；

步骤(4)、根据VUE父子通信解决方案设置级联面板组件动态切换展示数据的功能。

进一步的是，在步骤(1)中，所述将树形结构数据转化为对象数组数据的具体实施方法包括：

步骤11、设置第一空数组与第二空数组；

步骤12、将初始树形结构数据放进第一空数组，作为第一空数组的第一个元素；

步骤13、遍历树形结构数据，将树形结构数据的第一个元素的子元素按层级分别放进第一空数组与第二空数组，若子元素的层级不够，则将undefined元素放进第一空数组，将0放进第二空数组。

进一步的是，在步骤(2)中，带有标题的面板子组件是由标题区域和层级数据显示区域组成。

进一步的是，所述标题区域用于显示标题和添加按钮图标，所述标题是标题数组中对应的元素，所述添加按钮用于调用添加事件以添加所在层级数据。

进一步的是，所述层级数据显示区域用于显示对应层级数据列表，所述层级数据列表由遍历当前应该展示的对象数组数据对应的层级数据得到。

进一步的是，所述层级数据列表的每一项包括输入框、修改按钮、删除按钮及保存按钮，所述输入框用于接收或修改所述列表项对应的结点数据，所述修改按钮用于将输入框的禁止输入状态更改为输入状态，从而能对所述列表项进行编辑，所述删除按钮用于调用所述列表项的删除事件，所述保存按钮用于将所述输入框的状态从允许输入更改为禁止输入，同时调用保存事件保存数据。

进一步的是，在步骤(4)中，所述动态切换展示数据的方法包括：点击任意面板列表的任意列表项时，将当前层级的子层级面板展示的数据切换成列表项对应的结点数据的子结点数据。