基于AVUE框架实现avue-crud表格树的可编辑方法技术

本发明专利技术公开了一种基于AVUE框架实现avue

【技术实现步骤摘要】
基于AVUE框架实现avue
‑
crud表格树的可编辑方法


[0001]本专利技术涉及前端开发AVUE框架
，具体涉及一种基于AVUE框架实现avue
‑
crud表格树的可编辑方法。

技术介绍

[0002]Avue框架是基于现有的element
‑
ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图，主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富的数据展示组件，让开发变得更加容易。
[0003]但是，在现有的AVUE框架中不可直接实现结构树的可编辑功能。

技术实现思路

[0004]针对现有技术中存在的不足之处，本专利技术提供一种基于AVUE框架实现avue
‑
crud表格树的可编辑方法，可以完成列表动态添加多个层级。
[0005]为实现上述目的，本专利技术提供如下技术方案：
[0006]一种基于AVUE框架实现avue
‑
crud表格树的可编辑方法，其包括步骤：
[0007]a、利用AVUE框架中avue
‑
crud表格组件的行编辑功能新增基础行编辑表格，作为表格树的一个层级；
[0008]b、在avue
‑
crud表格组件的操作栏自定义卡槽，为新增层级添加新增子项按钮；
[0009]c、定义新增子项按钮的功能，当点击新增子项按钮时，在新增子项按钮所在层级的下一层级通过重复步骤a，新增表格树的下一个层级；
[0010]d、若新增表格树的层级大于二，则重复步骤b～c，直至完成表格树的所有层级，结束编辑；
[0011]e、若新增表格树的层级不大于二，则直接结束编辑。
[0012]作为本专利技术方法进一步的方案，所述方法还包括步骤：在avue
‑
crud表格组件的操作栏自定义卡槽，为表格树的新增层级添加删除按钮，定义删除按钮的功能，当点击删除按钮时，删除所在层级的基础行编辑表格。
[0013]作为本专利技术方法进一步的方案，在步骤c中，根据点击时传入当前层级的数据参数，判断需要新增子项的层级，每次新增子项中设置子项的值，其中包括唯一标识id值，并且设置该层级的状态为可编辑。
[0014]作为本专利技术方法进一步的方案，所述方法还包括步骤：通过自定义卡槽的方式，重新定义数据框组件来调整表格树中输入框的宽度。
[0015]作为本专利技术方法进一步的方案，所述方法还包括步骤：通过自定义卡槽的方式，对表格树的各层级添加排序功能，并设置排序规则。
[0016]一种计算机可读介质，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行如上所述的方法。
[0017]由于采用上述技术方案，使得本专利技术具有以下有益效果：
[0018]1.在已有的框架中完成表格树的可编辑功能，避免项目添加新的引入包(引入多个UI包，会涉及全局变量样式问题)；
[0019]2.在此方案中，可根据不用需求完成层级展示；
[0020]3.可以根据自己需求层级展示表单数据，并且需求简单修改参数配置。
附图说明
[0021]为了更清楚地说明本专利技术实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0022]图1为本专利技术实施例的基于AVUE框架实现avue
‑
crud表格树的可编辑方法的流程图。
[0023]图2为采用本专利技术实施例的基于AVUE框架实现avue
‑
crud表格树的可编辑方法得到的表格树示意图。
[0024]图3为本专利技术实施例的新增子项添加数据逻辑图。
具体实施方式
[0025]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述。下面通过参考附图描述的实施例是示例性的，仅用于解释本专利技术，而不能理解为对本专利技术的限制。
[0026]Avue项目一直在用的pc端后台管理系统的组件库是element
‑
ui，但是在最近的项目中使用了avue
‑
crud这个组件，它是Avue这个库里面的表格组件。avue
‑
crud表格是基于element
‑
ui封装的更好用的组件库。它把一个完整的增删改查全部封装了。
[0027]avue
‑
crud表格组件的行编辑功能可以编辑单行的基础行编辑表格，但是，不能直接编辑表格树，因此本专利技术正式针对，在现有的AVUE框架中不可实现当前表格中结构树的可编辑功能的缺陷，提出一种基于AVUE框架实现avue
‑
crud表格树的可编辑方法，根据AVUE当前文档完成基础的配置操作，其中defaultExpandAll需设置为true，用于默认展开子项。在当前框架中无法通过基础配置来完成此功能，因此，此次使用基础数据控制表格展示来完成(此处展示三层数据处理逻辑)。
[0028]配合图1～3所示，本专利技术方法的步骤如下：
[0029]步骤a、利用AVUE框架中avue
‑
crud表格组件的行编辑功能新增基础行编辑表格，作为表格树的一个层级，如图1中的第1行表格。
[0030]b、在avue
‑
crud表格组件的操作栏自定义卡槽，为新增层级添加新增子项按钮，如图1的第一行表格最靠右的“操作”一栏中的“+新增子项”按钮；同理，也可以在avue
‑
crud表格组件的操作栏自定义卡槽，为表格树的新增层级添加删除按钮，如图1所示的“删除”按钮。
[0031]c、定义新增子项按钮的功能，当点击新增子项按钮时，在新增子项按钮所在层级的下一层级通过重复步骤a，新增表格树的下一个层级，如图2中所示的第2行和第5行，都是
第1行表格的下一层级，对于这些下一层级的表格，当需要配置再下一层级时，也可以通过设置新的新增子项按钮，来实现其下一层级表格的建立；
[0032]同样的，定义删除按钮的功能，当点击删除按钮时，删除所在层级的基础行编辑表格，每一层级都可以设置“删除”按钮。
[0033]d、若新增表格树的层级大于二，则重复步骤b～c，如图2中所示的第3行和第4行就是第2行表格的再下一层级的表格，直至完成表格树的所有层级，结束编辑；
[0034]e、若新增表格树的层级不大于二，即没有新增更多层级的需求时，则直接结束编辑。
[0035]进一步的，步骤a的实现可通过AVUE框架中avue
‑
crud表格组件的配置项完成，是现有技术。
[0036]步骤b中，在使用的avue本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于AVUE框架实现avue
‑
crud表格树的可编辑方法，其特征在于，包括步骤：a、利用AVUE框架中avue
‑
crud表格组件的行编辑功能新增基础行编辑表格，作为表格树的一个层级；b、在avue
‑
crud表格组件的操作栏自定义卡槽，为新增层级添加新增子项按钮；c、定义新增子项按钮的功能，当点击新增子项按钮时，在新增子项按钮所在层级的下一层级通过重复步骤a，新增表格树的下一个层级；d、若新增表格树的层级大于二，则重复步骤b～c，直至完成表格树的所有层级，结束编辑；e、若新增表格树的层级不大于二，则直接结束编辑。2.如权利要求1所述的基于AVUE框架实现avue
‑
crud表格树的可编辑方法，其特征在于，还包括步骤：在avue
‑
crud表格组件的操作栏自定义卡槽，为表格树的新增层级添加删除按钮，定义删除按钮的功能，当点击删除...

【专利技术属性】
技术研发人员：黄婉涛，沈伟东，
申请(专利权)人：上海电信科技发展有限公司，
类型：发明
国别省市：