本技术涉及web前端软件开发领域，具体涉及一种构建数据驱动table的视图组件及方法。
背景技术：
：：1、在目前的web后台管理系统中，存在大量的报表类的数据展示页面。为提高开发效率常用element plus的组件库，因其ui美观、组件丰富、易上手，是前端开发首选的组件库，通常采用其提供的table组件来实现表格类业务需求的渲染。随着平台代码量的增加，会存在大量的表格类业务的页面，就会存在一些问题，属性和方法的重复性定义，表格渲染数据时重复的dom复制，表格主题更换样式重复定义，这都会导致代码会过于冗余，难以维护，开发效率低。技术实现思路1、本技术开发的table的视图组件，按视图-模型结构封装table组件，组件即为视图，对数据进行展示的界面，模型即为要展示的数据。通过传入相应数据，不用理解视图内渲染处理逻辑，就可以呈现需要表达的界面。其技术方案为，2、一种构建数据驱动table的视图组件，包括调参模块、侦听模块和功能选择模块，以el-table为根标签，利用vue属性透传特性，以继承el-table的原始属性，基于elementplus库中的el-table封装table组件，配置基于vue3.0框架的前端开发环境；3、其中，4、调参模块：用vue宏命令defineprops，定义需要传入的参数，用props变量来接受参数，以便在组件内部进行调用；5、侦听模块：组件内部添加侦听器watch函数，使用该函数在每次tablecolumndata参数状态发生变化时触发回调函数，用数组方法filter函数，根据isvisible属性值，过滤出需要显示的列，此时定义一个columndata响应式变量，接受过滤后的新值，以便后续使用；6、功能选择模块：根据需求选择相应的功能，渲染表格样式。7、优选的，调参模块包括：8、tabledata是array类型的json数据，是表格渲染的数据源，即为需要的模型数据；9、rowkey是string类型，是表格tr唯一性的标识，用来跟踪每个循环体节点，利用vue的vnode特性，模型变化时提升组件内容的渲染；10、showselection为boolean类型，控制是否启用表格的多选功能，默认为false；11、tablecolumndata是array类型的json数据，用于配置表格每列的表头及列的展示内容。12、优选的，功能选择模块包括：13、keyvalue属性为string类型，定义了每列需要展示tabledata数据的键；14、thname属性为string类型，定义了每列表头名称即表格th的内容；15、slotname属性为string类型，定义了插槽的name，用来给插槽分配唯一的id，当传入该值时，组件内部就会生成一个具名插槽，所述的具名插槽为父组件中定义的<template#name>插槽内容提供了容纳的出口；16、isvisible属性为boolean类型，控制需要显示的表格列；17、width属性为number类型，控制单元格宽度占比，不传时根据内容自适应；18、formatter属性是个function类型，当渲染内容不符合预期时，用来格式化单元格内容；classname属性为string类型，根据组件内预设样式类名，传入相应类名以控制单元格样式；19、dataloading是boolean类型，当请求数据源及组件渲染时，显示加载动画；20、selectedids是array类型，是rowkey的集合，当传值时，对应的行就会被自动勾选；21、themeclassname是string类型，可传入已预设好的主题样式的类名，切换表格主题样式。22、优选的，组件内部用vue宏命令defineemits定义父组件监听到的组件内部触发的事件，定义一个emit变量接受，需要提供给父组件调用的事件，即可用emit(‘someevent’)自定义触发事件，父组件可通过v-on监听事件，其中有：23、cellclick事件是点击表格单元格触发的事件；24、rowclick事件是点击表格行触发的事件；25、selectionchange事件是当启用表格多选功能时，勾选或取消时触发的事件；26、其中，tabledata、rowkey、dataloading、cellclick、rowclick、selectionchange作为属性绑定到el-table标签上；分出两个el-table-column，一个是selection类型，通过showselection控制启用，另一作为columndata响应式数据的循环体，循环时相应的值作为属性值，内部置入一个以slotname命名的动态插槽，给父组件提供的插槽内容提供出口。27、优选的，在main.js中引入封装好的table视图组件，利用app.component(‘table’, table)方法注册组件在vue上下文环境中。28、一种构建数据驱动table的视图组件方法，包括以下步骤：29、s1. 基于vue3.0框架的前端开发环境，设置el-table为根标签，利用vue属性透传特性，以继承el-table的原始属性；30、s2. 基于element plus库中的el-table封装table组件，并引入element plus组件库；31、s3. 定义需要传入的参数、配置数据源、设置跟踪标识和功能选择。32、优选的，步骤s2中定义需要传入的参数包括以下内容：33、定义需要传入的参数：组件内部用vue宏命令defineprops，定义需要传入的参数，用props变量来接受参数，以便在组件内部进行调用，其中有：34、tabledata是array类型的json数据，是表格渲染的数据源，即为需要的模型数据；35、rowkey是string类型，是表格tr唯一性的标识，用来跟踪每个循环体节点，利用vue的vnode特性，模型变化时提升组件内容的渲染；36、showselection为boolean类型，控制是否启用表格的多选功能，可默认为false；37、tablecolumndata是array类型的json数据，用于配置表格每列的表头及列的展示内容；38、优选的，步骤s2中设置功能选择包括以下内容：39、keyvalue属性为string类型，定义了每列需要展示tabledata数据的键；40、thname属性为string类型，定义了每列表头名称即表格th的内容；41、slotname属性为string类型，定义了插槽的name，用来给插槽分配唯一的id，当传入该值时，组件内部就会生成一个具名插槽，这个具名插槽为父组件中定义的<template #name>插槽内容提供了容纳的出口；42、isvisible属性为boolean类型，控制需要显示的表格列；43、width属性为number类型，控制单元格宽度占比，不传时根据内容自适应；44、formatter属性是个function类型，当渲染内容不符合预期时，用来格式化单元格内容；classname属性为string类型，根据组件内预设样式类名，传入相应类名以控制单元格样式；45、dataloading是boolean类型，当请求数据源及组件渲染时，显示加载动画；46、selectedids是array类型，是rowkey的集合，当传值时，对应的行就会被自动勾选；47、themeclassname是string类型，可传入已预设好的主题样式的类名，切换表格主题样式；48、组件内部用vue宏命令defineemits定义父组件可以监听到的组件内部触发的事件，定义一个emit变量接受，需要提供给父组件调用的事件，即可用emit(‘someevent’)自定义触发事件，父组件可通过v-on监听事件，其中有：49、cellclick事件是点击表格单元格触发的事件；50、rowclick事件是点击表格行触发的事件；51、selectionchange事件是当启用表格多选功能时，勾选或取消时触发的事件。52、优选的，组件内部添加侦听器watch函数，使用该函数在每次tablecolumndata参数状态发生变化时触发回调函数，用数组方法filter函数，根据isvisible属性值，过滤出需要显示的列，此时定义一个columndata响应式变量，接受过滤后的新值，以便后续使用；53、其中tabledata、rowkey、dataloading、cellclick、rowclick、selectionchange作为属性绑定到el-table标签上；el-table标签分出两个el-table-column，一个是selection类型，通过showselection控制启用，另一作为columndata响应式数据的循环体，循环时相应的值作为属性值，内部置入一个以slotname命名的动态插槽，给父组件提供的插槽内容提供出口。54、优选的，table组件引入element plus组件库，配置基于vue3.0框架的前端开发环境。55、与现有技术相比，本技术有益效果如下：56、通过以上可以满足多种场景的应用，根据视图-模型结构，仅通过父组件传入的数据模型，即可实现表格的动态化展示，同时达到组件的高度内聚，减少了代码的编写量，使代码更易维护，提高了开发效率。更少的关注视图组件的实现，更多关注的数据模型的变化，实现业务需求，又大大提高了开发者生产效率。当前第1页12当前第1页12
技术特征：1.一种构建数据驱动table的视图组件，其特征在于，包括调参模块、侦听模块和功能选择模块，以el-table为根标签，利用vue属性透传特性，以继承el-table的原始属性，基于element plus库中的el-table封装table组件，配置基于vue3.0框架的前端开发环境；
2.根据权利要求1所述的一种构建数据驱动table的视图组件，其特征在于，调参模块包括：
3.根据权利要求1所述的一种构建数据驱动table的视图组件，其特征在于，功能选择模块包括：
4.根据权利要求3所述的一种构建数据驱动table的视图组件，其特征在于，组件内部用vue宏命令defineemits定义父组件监听到的组件内部触发的事件，定义一个emit变量接受，需要提供给父组件调用的事件，即可用emit(‘someevent’)自定义触发事件，父组件可通过v-on监听事件，其中有：
5. 根据权利要求4所述的一种构建数据驱动table的视图组件，其特征在于，在main.js中引入封装好的table视图组件，利用app.component(‘table’, table)方法注册组件在vue上下文环境中。
6.一种构建数据驱动table的视图组件方法，其特征在于，包括以下步骤：
7.根据权利要求6所述的一种构建数据驱动table的视图组件方法，其特征在于，步骤s2中定义需要传入的参数包括以下内容：
8.根据权利要求6所述的一种构建数据驱动table的视图组件方法，其特征在于，步骤s2中设置功能选择包括以下内容：
9.根据权利要求6所述的一种构建数据驱动table的视图组件方法，其特征在于，组件内部添加侦听器watch函数，使用该函数在每次tablecolumndata参数状态发生变化时触发回调函数，用数组方法filter函数，根据isvisible属性值，过滤出需要显示的列，此时定义一个columndata响应式变量，接受过滤后的新值，以便后续使用；
10. 根据权利要求6所述的一种构建数据驱动table的视图组件方法，其特征在于，table组件引入element plus组件库，配置基于vue3.0框架的前端开发环境。
技术总结本申请涉及Web前端软件开发领域，具体涉及一种构建数据驱动table的视图组件及方法，包括调参模块、侦听模块和功能选择模块，以el‑table为根标签，利用Vue属性透传特性，以继承el‑table的原始属性，基于Element Plus库中的el‑table封装table组件，配置基于Vue3.0框架的前端开发环境；优点在于，通过以上可以满足多种场景的应用，根据视图‑模型结构，仅通过父组件传入的数据模型，即可实现表格的动态化展示，同时达到组件的高度内聚，减少了代码的编写量，使代码更易维护，提高了开发效率。
技术研发人员：魏传强,宋耀,司君波,马龙山,刘鹏
受保护的技术使用者：山东齐鲁壹点传媒有限公司
技术研发日：技术公布日：2024/6/26
