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

权利要求书

1.基于VUE的级联面板组件动态切换展示数据的方法，其特征在于，包括：

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

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

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

步骤(4)、根据VUE父子通信解决方案设置级联面板组件动态切换展示数据的功能，所述动态切换展示数据的功能包括添加功能、删除功能以及修改功能；

所述动态切换展示数据的方法包括：点击任意面板列表的任意列表项时，将当前层级的子层级面板展示的数据切换成列表项对应的结点数据的子结点数据，具体实施过程包括，给所有列表项添加点击事件，所述点击事件的参数为所在列表项对应的结点数据和遍历下标，在点击事件对应的点击函数中利用父子组件通信解决方案触发父组件中的点击函数，在父组件的点击函数中，通过遍历修改所述子层级应该显示的数据以及当前层级及子层级应该高亮显示的列表项的下标。

2.根据权利要求1所述的基于VUE的级联面板组件动态切换展示数据的方法，其特征在于，在步骤(1)中，所述将树形结构数据转化为对象数组数据的具体实施方法包括：

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

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

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

3.根据权利要求1所述的基于VUE的级联面板组件动态切换展示数据的方法，其特征在于，在步骤(2)中，带有标题的面板子组件是由标题区域和层级数据显示区域组成。

4.根据权利要求3所述的基于VUE的级联面板组件动态切换展示数据的方法，其特征在于，所述标题区域用于显示标题和添加按钮图标，所述标题是标题数组中对应的元素，所述添加按钮用于调用添加事件以添加所在层级数据。

5.根据权利要求3所述的基于VUE的级联面板组件动态切换展示数据的方法，其特征在于，所述层级数据显示区域用于显示对应层级数据列表，所述层级数据列表由遍历当前应该展示的对象数组数据对应的层级数据得到。

6.根据权利要求5所述的基于VUE的级联面板组件动态切换展示数据的方法，其特征在于，所述层级数据列表的每一项包括输入框、修改按钮、删除按钮及保存按钮，所述输入框用于接收或修改列表项对应的结点数据，所述修改按钮用于将输入框的禁止输入状态更改为输入状态，从而能对列表项进行编辑，所述删除按钮用于调用列表项的删除事件，所述保存按钮用于将所述输入框的状态从允许输入更改为禁止输入，同时调用保存事件保存数据。