基于elementui封装可配置化table组件
技术领域：
：1.本发明涉及的是数据报表展示web前端软件开发领域，具体涉及一种基于elementui封装可配置化table组件。
背景技术：
：：2.在大多数项目的管理平台中，数据报表展示是一项常见且重要的需求，利用vue.js和elementui可以编写出高效、美观的表格页面，但是elementui提供的el-table在使用上却有一些不便之处。比如，在一个项目中前后端往往约定一种统一的数据格式和分页查询规则，然而el-table每次使用都需要获取解析数据，编写分页逻辑的代码，这样当组件使用数量多了之后会造成大量的冗余代码。el-table原生也没有提供诸如行内编辑，使用自定义渲染函数等功能。3.频繁使用el-table组件编写表格时，大量的重复代码会导致后期维护的成本大大增加。而且el-table原生的能力并不能满足目前逐渐复杂的需求，综上所述，本发明设计了一种基于elementui封装可配置化table组件。技术实现要素：4.针对现有技术上存在的不足，本发明目的是在于提供一种基于elementui封装可配置化table组件，通过封装一个新的组件，可以只通过编写配置对象就能实现复杂的业务功能，只需要关注具体的业务逻辑即可，减少开发成本。5.为了实现上述目的，本发明是通过如下的技术方案来实现：基于elementui封装可配置化table组件采用基于vue.js和elementui二次封装table组件的方法，主要包括以下流程步骤：6.s1、新建一个vue组件，命名为table，引入elementui提供的表格组件el-table和分页器组件el-pagination，定义响应式数据tabledata，用于接收数据源返回数据列表，绑定在el-table的data属性上，作为el-table的数据源数组；定义计算属性pager，内部维护currentpage和pagesize以及total数据，用于绑定给分页器上。然后向外导出一个整合后的table组件；7.s2、table组件支持通过vue的props特性传入配置对象，在created生命周期函数中解析父组件传入的配置对象“op”，用于设置table组件的数据源地址及其参数、表头等；8.s3、table组件解析配置对象后，根据immediate配置决定是否自动请求数据。组件会请求dataset配置中的api属性所指的地址，数据返回后，统一经由normalizeresponse函数解析，抹平可能存在的不同接口或平台的数据差异后，将结果绑定在vue的data中，最后渲染绘制表格；9.s4、为实现自动添加分页器功能，前端和后端约定一种分页数据格式，解析数据源返回数据的同时更新分页器。10.s5、行数据操作作为表格常见需求，增加简易的配置方式满足单行数据操作。添加operatecolumn.buttons配置自定义操作按钮，按钮配置包含label和handler决定按钮的名称和功能。11.s6、对于列配置对象可以通过增加editenable对象配置该列的行内编辑行为，table组件会检测当有列增加了editenable后，为表格每行最后追加“编辑”、“保存”、“取消”、“删除”功能按钮。12.s7、为了应对可能出现的表格需要渲染更加复杂的内容，table组件增加支持直接使用render函数渲染内容的能力，遵从vue.js渲染函数语法规则，使table组件能够支持js的完整能力。13.本发明具有以下有益效果：14.1.本发明新的table组件具有根据配置自动获取数据的能力，相比于传统table组件的使用，该方式能够大大降低开发的代码量，并且统一了接口的调用方式和返回结构，不仅避免了前端漏洞产生，也同时规范了前后端的交互；15.2.本发明将业务常用功能进行了统一封装，只需要简单的配置就可以实现复杂的功能，开发者使用table组件只需要关注业务逻辑，不必关注组件模版的编写。附图说明16.下面结合附图和具体实施方式来详细说明本发明；17.图1为本发明的组件执行步骤图。具体实施方式18.为使本发明实现的技术手段、创作特征、达成目的与功效易于明白了解，下面结合具体实施方式，进一步阐述本发明。19.参照图1，本具体实施方式采用以下技术方案：基于vue.js和elementui二次封装table组件的方法，主要包括以下流程步骤：20.s1、新建一个vue组件，命名为table，引入elementui提供的表格组件el-table和分页器组件el-pagination，定义响应式数据tabledata，用于接收数据源返回数据列表，绑定在el-table的data属性上，作为el-table的数据源数组；定义计算属性pager，内部维护currentpage和pagesize以及total数据，用于绑定给分页器上。然后向外导出一个整合后的table组件；21.s2、table组件支持通过vue的props特性传入配置对象，在created生命周期函数中解析父组件传入的配置对象“op”，用于设置table组件的数据源地址及其参数、表头等；22.s3、table组件解析配置对象后，根据immediate配置决定是否自动请求数据。组件会请求dataset配置中的api属性所指的地址，数据返回后，统一经由normalizeresponse函数解析，抹平可能存在的不同接口或平台的数据差异后，将结果绑定在vue的data中，最后渲染绘制表格；23.s4、为实现自动添加分页器功能，前端和后端约定一种分页数据格式，解析数据源返回数据的同时更新分页器。24.s5、行数据操作作为表格常见需求，增加简易的配置方式满足单行数据操作。添加operatecolumn.buttons配置自定义操作按钮，按钮配置包含label和handler决定按钮的名称和功能。25.s6、对于列配置对象可以通过增加editenable对象配置该列的行内编辑行为，table组件会检测当有列增加了editenable后，为表格每行最后追加“编辑”、“保存”、“取消”、“删除”功能按钮。26.s7、为了应对可能出现的表格需要渲染更加复杂的内容，table组件增加支持直接使用render函数渲染内容的能力，遵从vue.js渲染函数语法规则，使table组件能够支持js的完整能力。27.综上，本具体实施方式将el-table、el-pagination等组件整合，向外导出一个封装后的table组件。table组件支持通过vue的props特性传入配置对象，用于设置table组件的数据源地址及其参数、表头等。table组件解析配置对象，根据配置请求数据，解析并绑定数据，最后绘制表格。28.最简场景下使用该表格组件只需要引入并配置数据源地址和列字段即可展示表格。如需其他扩展功能皆可通过配置实现。29.实施例1：一种基于vue.js和elementui的封装的配置优先table组件，包括以下流程步骤：30.s1、按照vue组件化规范，导入并注册table组件，在template里使用table组件，在props里增加tableoption对象，绑定在table组件的op属性上，用于配置table组件的各种特性，下面主要介绍op对象的编写；31.s2、配置数据源对象dataset。dataset包含api、filter、param、requesttype、resultpath属性。(1)api属性定义获取表格数据的接口名称，类型为string。(2)filter属性定义表格的数据过滤参数及参数值，类型为object。(3)param属性定义接口需要的固定参数及参数值，类型为object。(4)requesttype属性定义接口入参类型，类型为string，可选‘json’或‘formdata’。(5)resultpath定义返回数据取值路径，类型为字符串，如‘data.result.datalist’，表示会从返回响应体中按照data.result.datalist的路径进行取值。32.s3、分页器功能默认自动启用，可以通过配置op.showpager＝false来关闭分页器功能。分页器还可以通过添加op.pager对象进行配置，接收sizes和limit两个属性，分别表示可选的和默认的的每页展示条数。33.s4、通过op.columns配置表格的每列的表头和数据展示，类型为array；数组按照顺序，每项表示表格从左至右的列配置，类型为object，具体包含属性label、prop、width等。(1)label定义列名称。(2)prop定义该列数据在数据源中的取值属性。(2)width定义列宽。还有一些如formatter等原生elementui支持的特性本table组件同样支持。34.s5、组件支持通过渲染函数渲染单元格内容，在op.columns项目中增加render属性，类型为function。该函数接收两个参数，第一个参数是vue定义的createelement函数，用于生成vnode对象，第二个参数是table组件回传的当前行数据rowdata和单元格元数据cellvalue。依照vue规定的createelement函数用法，利用rowdata和cellvalue数据可以自由的渲染任何可能的单元格内容。35.s6、table组件提供易用的操作按钮功能，需添加op.operatecolumn对象，配置对象包含label和buttons属性。(1)label定义了操作按钮列表头的名称，类型为string，默认值为“操作”。(2)buttons定义了具体的操作按钮，类型为array，数组的每项表示一个按钮，具体为一个对象，其包含属性label、type、handler、showstatus；label定义按钮名称，type定义按钮类型，handler定义了按钮点击的行为，类型为function接收当前行的数据对象rowdata为入参。组件内部会自动计算操作列的宽度，使用者不需要考虑按钮展示问题。36.以上显示和描述了本发明的基本原理和主要特征和本发明的优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。当前第1页12当前第1页12
技术领域：
：1.本发明涉及的是数据报表展示web前端软件开发领域，具体涉及一种基于elementui封装可配置化table组件。
背景技术：
：：2.在大多数项目的管理平台中，数据报表展示是一项常见且重要的需求，利用vue.js和elementui可以编写出高效、美观的表格页面，但是elementui提供的el-table在使用上却有一些不便之处。比如，在一个项目中前后端往往约定一种统一的数据格式和分页查询规则，然而el-table每次使用都需要获取解析数据，编写分页逻辑的代码，这样当组件使用数量多了之后会造成大量的冗余代码。el-table原生也没有提供诸如行内编辑，使用自定义渲染函数等功能。3.频繁使用el-table组件编写表格时，大量的重复代码会导致后期维护的成本大大增加。而且el-table原生的能力并不能满足目前逐渐复杂的需求，综上所述，本发明设计了一种基于elementui封装可配置化table组件。技术实现要素：4.针对现有技术上存在的不足，本发明目的是在于提供一种基于elementui封装可配置化table组件，通过封装一个新的组件，可以只通过编写配置对象就能实现复杂的业务功能，只需要关注具体的业务逻辑即可，减少开发成本。5.为了实现上述目的，本发明是通过如下的技术方案来实现：基于elementui封装可配置化table组件采用基于vue.js和elementui二次封装table组件的方法，主要包括以下流程步骤：6.s1、新建一个vue组件，命名为table，引入elementui提供的表格组件el-table和分页器组件el-pagination，定义响应式数据tabledata，用于接收数据源返回数据列表，绑定在el-table的data属性上，作为el-table的数据源数组；定义计算属性pager，内部维护currentpage和pagesize以及total数据，用于绑定给分页器上。然后向外导出一个整合后的table组件；7.s2、table组件支持通过vue的props特性传入配置对象，在created生命周期函数中解析父组件传入的配置对象“op”，用于设置table组件的数据源地址及其参数、表头等；8.s3、table组件解析配置对象后，根据immediate配置决定是否自动请求数据。组件会请求dataset配置中的api属性所指的地址，数据返回后，统一经由normalizeresponse函数解析，抹平可能存在的不同接口或平台的数据差异后，将结果绑定在vue的data中，最后渲染绘制表格；9.s4、为实现自动添加分页器功能，前端和后端约定一种分页数据格式，解析数据源返回数据的同时更新分页器。10.s5、行数据操作作为表格常见需求，增加简易的配置方式满足单行数据操作。添加operatecolumn.buttons配置自定义操作按钮，按钮配置包含label和handler决定按钮的名称和功能。11.s6、对于列配置对象可以通过增加editenable对象配置该列的行内编辑行为，table组件会检测当有列增加了editenable后，为表格每行最后追加“编辑”、“保存”、“取消”、“删除”功能按钮。12.s7、为了应对可能出现的表格需要渲染更加复杂的内容，table组件增加支持直接使用render函数渲染内容的能力，遵从vue.js渲染函数语法规则，使table组件能够支持js的完整能力。13.本发明具有以下有益效果：14.1.本发明新的table组件具有根据配置自动获取数据的能力，相比于传统table组件的使用，该方式能够大大降低开发的代码量，并且统一了接口的调用方式和返回结构，不仅避免了前端漏洞产生，也同时规范了前后端的交互；15.2.本发明将业务常用功能进行了统一封装，只需要简单的配置就可以实现复杂的功能，开发者使用table组件只需要关注业务逻辑，不必关注组件模版的编写。附图说明16.下面结合附图和具体实施方式来详细说明本发明；17.图1为本发明的组件执行步骤图。具体实施方式18.为使本发明实现的技术手段、创作特征、达成目的与功效易于明白了解，下面结合具体实施方式，进一步阐述本发明。19.参照图1，本具体实施方式采用以下技术方案：基于vue.js和elementui二次封装table组件的方法，主要包括以下流程步骤：20.s1、新建一个vue组件，命名为table，引入elementui提供的表格组件el-table和分页器组件el-pagination，定义响应式数据tabledata，用于接收数据源返回数据列表，绑定在el-table的data属性上，作为el-table的数据源数组；定义计算属性pager，内部维护currentpage和pagesize以及total数据，用于绑定给分页器上。然后向外导出一个整合后的table组件；21.s2、table组件支持通过vue的props特性传入配置对象，在created生命周期函数中解析父组件传入的配置对象“op”，用于设置table组件的数据源地址及其参数、表头等；22.s3、table组件解析配置对象后，根据immediate配置决定是否自动请求数据。组件会请求dataset配置中的api属性所指的地址，数据返回后，统一经由normalizeresponse函数解析，抹平可能存在的不同接口或平台的数据差异后，将结果绑定在vue的data中，最后渲染绘制表格；23.s4、为实现自动添加分页器功能，前端和后端约定一种分页数据格式，解析数据源返回数据的同时更新分页器。24.s5、行数据操作作为表格常见需求，增加简易的配置方式满足单行数据操作。添加operatecolumn.buttons配置自定义操作按钮，按钮配置包含label和handler决定按钮的名称和功能。25.s6、对于列配置对象可以通过增加editenable对象配置该列的行内编辑行为，table组件会检测当有列增加了editenable后，为表格每行最后追加“编辑”、“保存”、“取消”、“删除”功能按钮。26.s7、为了应对可能出现的表格需要渲染更加复杂的内容，table组件增加支持直接使用render函数渲染内容的能力，遵从vue.js渲染函数语法规则，使table组件能够支持js的完整能力。27.综上，本具体实施方式将el-table、el-pagination等组件整合，向外导出一个封装后的table组件。table组件支持通过vue的props特性传入配置对象，用于设置table组件的数据源地址及其参数、表头等。table组件解析配置对象，根据配置请求数据，解析并绑定数据，最后绘制表格。28.最简场景下使用该表格组件只需要引入并配置数据源地址和列字段即可展示表格。如需其他扩展功能皆可通过配置实现。29.实施例1：一种基于vue.js和elementui的封装的配置优先table组件，包括以下流程步骤：30.s1、按照vue组件化规范，导入并注册table组件，在template里使用table组件，在props里增加tableoption对象，绑定在table组件的op属性上，用于配置table组件的各种特性，下面主要介绍op对象的编写；31.s2、配置数据源对象dataset。dataset包含api、filter、param、requesttype、resultpath属性。(1)api属性定义获取表格数据的接口名称，类型为string。(2)filter属性定义表格的数据过滤参数及参数值，类型为object。(3)param属性定义接口需要的固定参数及参数值，类型为object。(4)requesttype属性定义接口入参类型，类型为string，可选‘json’或‘formdata’。(5)resultpath定义返回数据取值路径，类型为字符串，如‘data.result.datalist’，表示会从返回响应体中按照data.result.datalist的路径进行取值。32.s3、分页器功能默认自动启用，可以通过配置op.showpager＝false来关闭分页器功能。分页器还可以通过添加op.pager对象进行配置，接收sizes和limit两个属性，分别表示可选的和默认的的每页展示条数。33.s4、通过op.columns配置表格的每列的表头和数据展示，类型为array；数组按照顺序，每项表示表格从左至右的列配置，类型为object，具体包含属性label、prop、width等。(1)label定义列名称。(2)prop定义该列数据在数据源中的取值属性。(2)width定义列宽。还有一些如formatter等原生elementui支持的特性本table组件同样支持。34.s5、组件支持通过渲染函数渲染单元格内容，在op.columns项目中增加render属性，类型为function。该函数接收两个参数，第一个参数是vue定义的createelement函数，用于生成vnode对象，第二个参数是table组件回传的当前行数据rowdata和单元格元数据cellvalue。依照vue规定的createelement函数用法，利用rowdata和cellvalue数据可以自由的渲染任何可能的单元格内容。35.s6、table组件提供易用的操作按钮功能，需添加op.operatecolumn对象，配置对象包含label和buttons属性。(1)label定义了操作按钮列表头的名称，类型为string，默认值为“操作”。(2)buttons定义了具体的操作按钮，类型为array，数组的每项表示一个按钮，具体为一个对象，其包含属性label、type、handler、showstatus；label定义按钮名称，type定义按钮类型，handler定义了按钮点击的行为，类型为function接收当前行的数据对象rowdata为入参。组件内部会自动计算操作列的宽度，使用者不需要考虑按钮展示问题。36.以上显示和描述了本发明的基本原理和主要特征和本发明的优点。本行业的技术人员应该了解，本发明不受上述实施例的限制，上述实施例和说明书中描述的只是说明本发明的原理，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。当前第1页12当前第1页12
再多了解一些
本文用于企业家、创业者技术爱好者查询，结果仅供参考。
