基于AVUE框架实现avue-crud表格树的可编辑方法与流程

基于avue框架实现avue-crud表格树的可编辑方法
技术领域：
：1.本发明涉及前端开发avue框架
技术领域：
：，具体涉及一种基于avue框架实现avue-crud表格树的可编辑方法。
背景技术：
：：2.avue框架是基于现有的element-ui库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图，主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富的数据展示组件，让开发变得更加容易。3.但是，在现有的avue框架中不可直接实现结构树的可编辑功能。技术实现要素：4.针对现有技术中存在的不足之处，本发明提供一种基于avue框架实现avue-crud表格树的可编辑方法，可以完成列表动态添加多个层级。5.为实现上述目的，本发明提供如下技术方案：6.一种基于avue框架实现avue-crud表格树的可编辑方法，其包括步骤：7.a、利用avue框架中avue-crud表格组件的行编辑功能新增基础行编辑表格，作为表格树的一个层级；8.b、在avue-crud表格组件的操作栏自定义卡槽，为新增层级添加新增子项按钮；9.c、定义新增子项按钮的功能，当点击新增子项按钮时，在新增子项按钮所在层级的下一层级通过重复步骤a，新增表格树的下一个层级；10.d、若新增表格树的层级大于二，则重复步骤b～c，直至完成表格树的所有层级，结束编辑；11.e、若新增表格树的层级不大于二，则直接结束编辑。12.作为本发明方法进一步的方案，所述方法还包括步骤：在avue-crud表格组件的操作栏自定义卡槽，为表格树的新增层级添加删除按钮，定义删除按钮的功能，当点击删除按钮时，删除所在层级的基础行编辑表格。13.作为本发明方法进一步的方案，在步骤c中，根据点击时传入当前层级的数据参数，判断需要新增子项的层级，每次新增子项中设置子项的值，其中包括唯一标识id值，并且设置该层级的状态为可编辑。14.作为本发明方法进一步的方案，所述方法还包括步骤：通过自定义卡槽的方式，重新定义数据框组件来调整表格树中输入框的宽度。15.作为本发明方法进一步的方案，所述方法还包括步骤：通过自定义卡槽的方式，对表格树的各层级添加排序功能，并设置排序规则。16.一种计算机可读介质，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行如上所述的方法。17.由于采用上述技术方案，使得本发明具有以下有益效果：18.1.在已有的框架中完成表格树的可编辑功能，避免项目添加新的引入包(引入多个ui包，会涉及全局变量样式问题)；19.2.在此方案中，可根据不用需求完成层级展示；20.3.可以根据自己需求层级展示表单数据，并且需求简单修改参数配置。附图说明21.为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。22.图1为本发明实施例的基于avue框架实现avue-crud表格树的可编辑方法的流程图。23.图2为采用本发明实施例的基于avue框架实现avue-crud表格树的可编辑方法得到的表格树示意图。24.图3为本发明实施例的新增子项添加数据逻辑图。具体实施方式25.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。26.avue项目一直在用的pc端后台管理系统的组件库是element-ui，但是在最近的项目中使用了avue-crud这个组件，它是avue这个库里面的表格组件。avue-crud表格是基于element-ui封装的更好用的组件库。它把一个完整的增删改查全部封装了。27.avue-crud表格组件的行编辑功能可以编辑单行的基础行编辑表格，但是，不能直接编辑表格树，因此本发明正式针对，在现有的avue框架中不可实现当前表格中结构树的可编辑功能的缺陷，提出一种基于avue框架实现avue-crud表格树的可编辑方法，根据avue当前文档完成基础的配置操作，其中defaultexpandall需设置为true，用于默认展开子项。在当前框架中无法通过基础配置来完成此功能，因此，此次使用基础数据控制表格展示来完成(此处展示三层数据处理逻辑)。28.配合图1～3所示，本发明方法的步骤如下：29.步骤a、利用avue框架中avue-crud表格组件的行编辑功能新增基础行编辑表格，作为表格树的一个层级，如图1中的第1行表格。30.b、在avue-crud表格组件的操作栏自定义卡槽，为新增层级添加新增子项按钮，如图1的第一行表格最靠右的“操作”一栏中的“+新增子项”按钮；同理，也可以在avue-crud表格组件的操作栏自定义卡槽，为表格树的新增层级添加删除按钮，如图1所示的“删除”按钮。31.c、定义新增子项按钮的功能，当点击新增子项按钮时，在新增子项按钮所在层级的下一层级通过重复步骤a，新增表格树的下一个层级，如图2中所示的第2行和第5行，都是第1行表格的下一层级，对于这些下一层级的表格，当需要配置再下一层级时，也可以通过设置新的新增子项按钮，来实现其下一层级表格的建立；32.同样的，定义删除按钮的功能，当点击删除按钮时，删除所在层级的基础行编辑表格，每一层级都可以设置“删除”按钮。33.d、若新增表格树的层级大于二，则重复步骤b～c，如图2中所示的第3行和第4行就是第2行表格的再下一层级的表格，直至完成表格树的所有层级，结束编辑；34.e、若新增表格树的层级不大于二，即没有新增更多层级的需求时，则直接结束编辑。35.进一步的，步骤a的实现可通过avue框架中avue-crud表格组件的配置项完成，是现有技术。36.步骤b中，在使用的avue-crud操作栏”menuleft”自定义卡槽添加新增子项按钮，方法可参考如下所示：37.《avue-crudv-model＝"formresponse":option＝"optionresponse":data＝"dataresponse"ref＝"crudresponse"》38.《templateslot＝"menuleft"》39.《el-button@click＝"addrowresponse"type＝"text"icon＝"el-icon-plus"size＝"small"》新增参数《/el-button》40.《/template》41.《templateslot-scope＝"{row}"slot＝"paramexample"》42.《avue-inputsize＝"small"v-model＝"row.paramexample"placeholder＝"参数示例"》《/avue-input》43.《/template》44.《templateslot-scope＝"{row}"slot＝"paramremark"》45.《avue-inputsize＝"small"v-model＝"row.paramremark"placeholder＝"参数描述"》《/avue-input》46.《/template》47.《templateslot＝"menu"slot-scope＝"{row,size,type}"》48.《el-buttontype＝"text"size＝"small"@click＝"handledelresponse(row,$index)"》《iclass＝"el-icon-delete"》《/i》删除《/el-button》49.《el-button:size＝"size":type＝"type"@click＝"handleaddresponse(row)"》《iclass＝"el-icon-plus"》《/i》新增子项《/el-button》50.《/template》51.《/avue-crud》52.步骤c中，可通过点击新增子项，展示子集的数据。53.在此方法中，根据点击时传入当前行的数据参数，判断需要新增子项的行，判断过程可参考图3所示的逻辑图，每次新增子项中设置子项的值，其中包括唯一标识id值，并且设置该行的状态为可编辑，通过配置$celledit:true来完成。id值的生成方式为多种，此处我们使用随意生成方式，方法如下：[0054][0055]添加数据逻辑如下图3所示。[0056]当我们处理完数据，为了把数据反显到表格中，需把表格进行刷新，此处使用refreshtable()方法来完成。可参考如下方法：[0057][0058][0059]此功能实现后，便可在页面查看新增后的效果，参考图2所示。[0060]进一步的，对于删除按钮的删除功能，当点击删除时，逻辑与新增相似，判断层级，并且通过新增时设置的唯一标识值id来筛选需删除的数据。具体方法可参考如下所示：[0061][0062][0063][0064]进一步的，在此框架中，表格树的input输入框为固定宽度，无法随着页面的变化而改变，所以，通过使用单个元素定义卡槽的方式(参考avue官方文档)，重新定义数据框组件来完成此功能。[0065]avue组件基于elementui来完成，但是在使用时，并非所有elementui组件都可适用与avue中，所以在此项目中，使用avue单独的组件(avue-input)会更稳定。[0066]进一步的，对于表格树的排序功能，当新增子项数据增多时，会涉及到数据的排序问题，此处分为两步[0067]当该行排序未定义时，逻辑判断时默认为0(默认为0为此展示例子中的业务逻辑，仅供参考)。[0068]根据不同层级完成该层级内的排序。具体方法可参考如下：[0069][0070][0071]本发明方法的实施例可在硬件、固件、软件或其任何组合中实施。本发明方法的实施例也可实施为存储于机器可读介质上的指令，其可由一个或多个处理器读取和执行。机器可读取介质可包括用于以可由机器(例如，计算装置)读取的形式储存或传输信息的任何机制。例如，机器可读取介质可包括：只读存储器(rom)；随机存取存储器(ram)；磁盘储存介质；光学储存介质；闪速存储器装置；电、光、声或其它形式的传播信号(例如，载波，红外信号，数字信号，等等)，以及其它。此外，固件、软件、例程、指令可以在本文中描述为执行特定动作。然而，应理解到，这样的描述仅仅是为了便利起见并且这样的动作实际上源自计算装置、处理器、控制器、或执行所述固件、软件、例程、指令等的其它装置。[0072]尽管已经示出和描述了本发明的实施例，但本具体实施例仅仅是对本发明的解释，其并不是对发明的限制，描述的具体特征、结构、材料或者特点可以在任何一个或多个实施例或示例中以合适的方式结合，本领域技术人员在阅读完本说明书后可在不脱离本发明的原理和宗旨的情况下，可以根据需要对实施例做出没有创造性贡献的修改、替换和变型等，但只要在本发明的权利要求范围内都受到专利法的保护。当前第1页12当前第1页12
技术特征：
1.一种基于avue框架实现avue-crud表格树的可编辑方法，其特征在于，包括步骤：a、利用avue框架中avue-crud表格组件的行编辑功能新增基础行编辑表格，作为表格树的一个层级；b、在avue-crud表格组件的操作栏自定义卡槽，为新增层级添加新增子项按钮；c、定义新增子项按钮的功能，当点击新增子项按钮时，在新增子项按钮所在层级的下一层级通过重复步骤a，新增表格树的下一个层级；d、若新增表格树的层级大于二，则重复步骤b～c，直至完成表格树的所有层级，结束编辑；e、若新增表格树的层级不大于二，则直接结束编辑。2.如权利要求1所述的基于avue框架实现avue-crud表格树的可编辑方法，其特征在于，还包括步骤：在avue-crud表格组件的操作栏自定义卡槽，为表格树的新增层级添加删除按钮，定义删除按钮的功能，当点击删除按钮时，删除所在层级的基础行编辑表格。3.如权利要求1所述的基于avue框架实现avue-crud表格树的可编辑方法，其特征在于，在步骤c中，根据点击时传入当前层级的数据参数，判断需要新增子项的层级，每次新增子项中设置子项的值，其中包括唯一标识id值，并且设置该层级的状态为可编辑。4.如权利要求1所述的基于avue框架实现avue-crud表格树的可编辑方法，其特征在于，还包括步骤：通过自定义卡槽的方式，重新定义数据框组件来调整表格树中输入框的宽度。5.如权利要求1所述的基于avue框架实现avue-crud表格树的可编辑方法，其特征在于，还包括步骤：通过自定义卡槽的方式，对表格树的各层级添加排序功能，并设置排序规则。6.一种计算机可读介质，其特征在于，所述计算机可读介质上存储有计算机指令，所述计算机指令在被处理器执行时，使所述处理器执行如权利要求1至5任一所述的方法。

技术总结
本发明公开了一种基于AVUE框架实现avue-crud表格树的可编辑方法，包括步骤：a、利用AVUE框架中avue-crud表格组件的行编辑功能新增基础行编辑表格，作为表格树的一个层级；b、在avue-crud表格组件的操作栏自定义卡槽，为新增层级添加新增子项按钮；c、定义新增子项按钮的功能，当点击新增子项按钮时，在新增子项按钮所在层级的下一层级通过重复步骤a，新增表格树的下一个层级；d、若新增表格树的层级大于二，则重复步骤b～c，直至完成表格树的所有层级，结束编辑；e、若新增表格树的层级不大于二，则直接结束编辑。本发明可实现在已有的框架中完成表格树的可编辑功能，避免项目添加新的引入包。的引入包。的引入包。


技术研发人员：黄婉涛 沈伟东
受保护的技术使用者：上海电信科技发展有限公司
技术研发日：2023.06.26
技术公布日：2023/10/6