基于vue的表格数据格式化组件实现方法
技术领域：
：1.本发明涉及前端开发
技术领域：
：，具体的说，是一种基于vue的表格数据格式化组件实现方法。
背景技术：
：：2.前端各个框架的出现给开发者的发开工作带来了许多的方便，前端的技术也是日新月异。vue.js的出现使得前端开发能更加的简洁、高效，迎来了越来越多的人的喜爱。前端的主要作用是对数据进行展示，把接口获取到的数据给用户以供交互，为了让用户更方便的去查看数据，通常会使用表格对数据进行展示和编辑，从而使数据更加的直观和清晰。因为vue是组件化开发，很多情况下表格会被作为一个单独的组件进行封装，但是目前来说，相对全面和通用的表格组件还是比较缺乏的，大部分组件只涵盖了基础数据的展示，但是后端数据往往还需要前端进行二次的转换、对不同种类的数据采取不同的数据格式化方案。所以会造成组件复用性较低、缺少通用性的问题，无形之中增加了开发的成本，也不利于提高开发的效率。技术实现要素：3.本发明的目的在于提供一种基于vue的表格数据格式化组件实现方法，用于解决现有技术中缺少全面和通用的表格组件，后端数据还需要前端进行二次转换、不同种类数据采取不同数据格式等导致组件复用性低缺少通用性的问题。4.本发明通过下述技术方案解决上述问题：5.一种基于vue的表格数据格式化组件实现方法，包括：6.步骤s1、基于vue elementui框架对表格的公共部分通过组件的方式进行封装，设置公共的样式和处理的方法，并且绑定监听事件和通用的属性；7.步骤s2、创建表格数据格式化组件，在指定页面或者全局的组件内注册，并通过模板《template》插入在动态循环的列表中；8.步骤s3、根据数据需要的格式化方案对表格数据格式化组件进行配置，实现数据的定制化转换。9.所述步骤s1具体包括：10.步骤s11、新建一个vue文件，用来存放el-table组件，el-table内存放一个《slot》《/slot》插槽，用于展示从父组件传递的动态列表数据，并为el-table组件绑定一些公共的属性和方法和自定义的事件；11.步骤s12、在需要使用表格的vue单页面中按组件路径引入组件，并在组件的components内注册表单组件并以basetable为表格组件的名称，在指定位置内通过《base-table》《/base-table》标签进行使用该表格组件；12.步骤s13、在《base-table》标签上通过v-on来对dom进行监听并执行相应的方法和v-model对数据进行监听进行数据的双向绑定。v-on和v-model是vue框架的指令。v-on用来绑定事件(监听dom事件并执行)。v-model用来绑定数据(监听获取数据的变化)。el-table是elementui的一个表格组件；13.所述步骤s2具体包括：在创建一个专门进行数据格式化的组件，在指定页面或者全局的组件内注册，在页面生命周期为mounted的时候针对父组件传递的类型进行解析处理：根据传递的内容从vuex的state对象中去查找看数据是否存在，如果存在则直接获取数据；如果在state对象内没有找到数据，则通过调用vuex的actions异步方法去请求接口获取数据并存储在vuex的state对象中。14.所述步骤s3具体包括：组件通过获取type属性来判断数据字典的数据结构，并根据不同的数据结构来对数据进行格式化的处理。type是通用的自定义属性之一，用来判断转换数据类型所使用的方案。数据字典是数据对象的集合，用来转换数据。即数据字典存放了键值对的集合，用来把传递过来的编码转成名称。15.本发明与现有技术相比，具有以下优点及有益效果：16.(1)本发明利用vue框架对表格数据格式化功能进行组件化封装，实现对不同要求的数据进行特定的数据格式化方案的处理等功能，解决目前表单组件因为通用性差而导致的代码重复、效率低下的问题。17.(2)本发明通过数据格式化组件来实现对数据的格式化处理，可以根据需求配置格式化方法，自行的增加或者修改处理逻辑，可扩展性强；通过统一的组件进行数据的格式化处理，减少了代码量和重复的逻辑书写，从而提高效率；异步数据获取之后是存在vuex中，避免了重复的数据请求，降低服务端的开销，提高页面运行的效率。附图说明18.图1为本发明中单页面与表格数据格式化组件大致的关系示意图；19.图2为本发明中使用到的vue组件之间数据传输方式的流程示意图；20.图3为本发明中表格数据格式化组件在vue页面中的使用流程示意图。具体实施方式21.下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。22.实施例：23.结合附图1和图2所示，一种基于vue的表格数据格式化组件实现方法，利用vue组件化开发的思想，将表单组件进行封装，并配合vuex状态管理工具来优化数据请求的重复性问题，提高数据请求和数据格式化的效率，实现vue组件中的可复用性和通用性，让组件对不同类型的数据格式化可以通用，所述方法包括：24.基于vue elementui框架对表格的公共部分通过组件的方式进行封装，给他公共的样式和处理的方法，并且绑定监听事件和通用的属性。25.封装一个组件专门处理数据、通过《template》插入在动态循环的列表中，对组件定制化一些数据格式化方案，通过父子组件传参的方式来获取指定方案，并执行。实现对列表的每个字段的数据进行定制化处理。26.根据不同数据格式化方案的不同，给数据格式化组件配置指定的参数，子组件通过参数信息去vuex的state内获取数据、如果没有数据则调用vuex中指定的actions方法，进行异步数据的请求，并存储在state中然后获取数据，并对数据进行转换和展示。27.结合图3所示，本发明的具体实现步骤如下：28.步骤1、在vue单页面中引入表格框架组件，并在components中注册，并在template内通过《base-table》《/base-table》标签使用，具体包括：29.1.1、新建一个vue文件，用来存放el-table组件，el-table内存放一个《slot》《/slot》插槽，用于展示从父组件传递的动态列表数据，，最后为el-table组件绑定一些公共的属性和方法和自定义的事件等；30.1.2、在需要使用表格的vue单页面中按组件路径引入组件，并在组件的components内注册表单组件并以basetable为表格组件的名称，在指定位置内通过《base-table》《/base-table》标签进行使用该表格组件；注册表格组件、组件名字为base-table。把《base-table》《/base-table》写在要展示的位置就能在页面展示这个表格组件了；31.1.3、在《base-table》标签上通过v-on来对dom进行监听并执行相应的方法和通过v-model对数据进行监听进行数据的双向绑定。v-on和v-model是vue框架的指令。v-on用来绑定事件(监听dom事件并执行)。v-model用来绑定数据(监听获取数据的变化)。el-table是elementui的一个表格组件。32.步骤2、创建表格数据格式化组件，在指定页面或者全局的components内注册，并在《base-table》内的数据动态渲染中通过《column-template》《column-template》标签插入在《templateslot-scope＝‘scope’》《/template》模板中，具体包括：33.2.1、在创建一个专门进行数据格式化的组件，在页面生命周期为mounted的时候针对父组件传递的类型进行解析处理。34.2.2、根据传递的内容从vuex的state中去查找看数据是否存在，如果存在则直接获取数据；如果在state内没有找到数据，则通过调用vuex的actions异步方法去请求接口获取数据并存储在vuex的state中。35.步骤3、根据数据需要的格式化方案对表格数据格式化组件进行配置，实现数据的定制化转换，具体包括：36.3.1、组件可以通过获取type属性来判断数据字典的数据类型是对象还是数组或者其他结构。37.3.2、知道数据结构之后就根据不同的数据结构来对数据进行格式化的处理。38.本发明中，外部的表格框架的统一封装，内部表头的数据绑定的内容可定制化，确保了页面样式的统一性，也便捷了组件化开发，兼容了个性化的需求；动态数据的渲染通过《slot》插槽进行展示，自定义的去实现表格的内容部分，使得组件更加的通用；对数据格式化方案进行单独封装、对数据进行统一的处理、可以自己添加处理方案，减少了冗余的代码量、更加的简洁和灵活：例如在数据处理的时候，数据字典内的数据以数组的形式去展示、有些接口的数据是以对象的形式去展示亦或者有些数据需要进行字符串转json，都可以根据类型去配置，然后组件判断完数据类型之后按照不同类型数据去处理，就更加的通用；通过vuex状态管理工具对异步数据进行存储，不仅仅优化了数据请求重复性的问题，也提高了页面的运行效率和后端的压力。39.尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本技术公开的原则范围和精神之内。当前第1页12当前第1页12
技术领域：
：1.本发明涉及前端开发
技术领域：
：，具体的说，是一种基于vue的表格数据格式化组件实现方法。
背景技术：
：：2.前端各个框架的出现给开发者的发开工作带来了许多的方便，前端的技术也是日新月异。vue.js的出现使得前端开发能更加的简洁、高效，迎来了越来越多的人的喜爱。前端的主要作用是对数据进行展示，把接口获取到的数据给用户以供交互，为了让用户更方便的去查看数据，通常会使用表格对数据进行展示和编辑，从而使数据更加的直观和清晰。因为vue是组件化开发，很多情况下表格会被作为一个单独的组件进行封装，但是目前来说，相对全面和通用的表格组件还是比较缺乏的，大部分组件只涵盖了基础数据的展示，但是后端数据往往还需要前端进行二次的转换、对不同种类的数据采取不同的数据格式化方案。所以会造成组件复用性较低、缺少通用性的问题，无形之中增加了开发的成本，也不利于提高开发的效率。技术实现要素：3.本发明的目的在于提供一种基于vue的表格数据格式化组件实现方法，用于解决现有技术中缺少全面和通用的表格组件，后端数据还需要前端进行二次转换、不同种类数据采取不同数据格式等导致组件复用性低缺少通用性的问题。4.本发明通过下述技术方案解决上述问题：5.一种基于vue的表格数据格式化组件实现方法，包括：6.步骤s1、基于vue elementui框架对表格的公共部分通过组件的方式进行封装，设置公共的样式和处理的方法，并且绑定监听事件和通用的属性；7.步骤s2、创建表格数据格式化组件，在指定页面或者全局的组件内注册，并通过模板《template》插入在动态循环的列表中；8.步骤s3、根据数据需要的格式化方案对表格数据格式化组件进行配置，实现数据的定制化转换。9.所述步骤s1具体包括：10.步骤s11、新建一个vue文件，用来存放el-table组件，el-table内存放一个《slot》《/slot》插槽，用于展示从父组件传递的动态列表数据，并为el-table组件绑定一些公共的属性和方法和自定义的事件；11.步骤s12、在需要使用表格的vue单页面中按组件路径引入组件，并在组件的components内注册表单组件并以basetable为表格组件的名称，在指定位置内通过《base-table》《/base-table》标签进行使用该表格组件；12.步骤s13、在《base-table》标签上通过v-on来对dom进行监听并执行相应的方法和v-model对数据进行监听进行数据的双向绑定。v-on和v-model是vue框架的指令。v-on用来绑定事件(监听dom事件并执行)。v-model用来绑定数据(监听获取数据的变化)。el-table是elementui的一个表格组件；13.所述步骤s2具体包括：在创建一个专门进行数据格式化的组件，在指定页面或者全局的组件内注册，在页面生命周期为mounted的时候针对父组件传递的类型进行解析处理：根据传递的内容从vuex的state对象中去查找看数据是否存在，如果存在则直接获取数据；如果在state对象内没有找到数据，则通过调用vuex的actions异步方法去请求接口获取数据并存储在vuex的state对象中。14.所述步骤s3具体包括：组件通过获取type属性来判断数据字典的数据结构，并根据不同的数据结构来对数据进行格式化的处理。type是通用的自定义属性之一，用来判断转换数据类型所使用的方案。数据字典是数据对象的集合，用来转换数据。即数据字典存放了键值对的集合，用来把传递过来的编码转成名称。15.本发明与现有技术相比，具有以下优点及有益效果：16.(1)本发明利用vue框架对表格数据格式化功能进行组件化封装，实现对不同要求的数据进行特定的数据格式化方案的处理等功能，解决目前表单组件因为通用性差而导致的代码重复、效率低下的问题。17.(2)本发明通过数据格式化组件来实现对数据的格式化处理，可以根据需求配置格式化方法，自行的增加或者修改处理逻辑，可扩展性强；通过统一的组件进行数据的格式化处理，减少了代码量和重复的逻辑书写，从而提高效率；异步数据获取之后是存在vuex中，避免了重复的数据请求，降低服务端的开销，提高页面运行的效率。附图说明18.图1为本发明中单页面与表格数据格式化组件大致的关系示意图；19.图2为本发明中使用到的vue组件之间数据传输方式的流程示意图；20.图3为本发明中表格数据格式化组件在vue页面中的使用流程示意图。具体实施方式21.下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。22.实施例：23.结合附图1和图2所示，一种基于vue的表格数据格式化组件实现方法，利用vue组件化开发的思想，将表单组件进行封装，并配合vuex状态管理工具来优化数据请求的重复性问题，提高数据请求和数据格式化的效率，实现vue组件中的可复用性和通用性，让组件对不同类型的数据格式化可以通用，所述方法包括：24.基于vue elementui框架对表格的公共部分通过组件的方式进行封装，给他公共的样式和处理的方法，并且绑定监听事件和通用的属性。25.封装一个组件专门处理数据、通过《template》插入在动态循环的列表中，对组件定制化一些数据格式化方案，通过父子组件传参的方式来获取指定方案，并执行。实现对列表的每个字段的数据进行定制化处理。26.根据不同数据格式化方案的不同，给数据格式化组件配置指定的参数，子组件通过参数信息去vuex的state内获取数据、如果没有数据则调用vuex中指定的actions方法，进行异步数据的请求，并存储在state中然后获取数据，并对数据进行转换和展示。27.结合图3所示，本发明的具体实现步骤如下：28.步骤1、在vue单页面中引入表格框架组件，并在components中注册，并在template内通过《base-table》《/base-table》标签使用，具体包括：29.1.1、新建一个vue文件，用来存放el-table组件，el-table内存放一个《slot》《/slot》插槽，用于展示从父组件传递的动态列表数据，，最后为el-table组件绑定一些公共的属性和方法和自定义的事件等；30.1.2、在需要使用表格的vue单页面中按组件路径引入组件，并在组件的components内注册表单组件并以basetable为表格组件的名称，在指定位置内通过《base-table》《/base-table》标签进行使用该表格组件；注册表格组件、组件名字为base-table。把《base-table》《/base-table》写在要展示的位置就能在页面展示这个表格组件了；31.1.3、在《base-table》标签上通过v-on来对dom进行监听并执行相应的方法和通过v-model对数据进行监听进行数据的双向绑定。v-on和v-model是vue框架的指令。v-on用来绑定事件(监听dom事件并执行)。v-model用来绑定数据(监听获取数据的变化)。el-table是elementui的一个表格组件。32.步骤2、创建表格数据格式化组件，在指定页面或者全局的components内注册，并在《base-table》内的数据动态渲染中通过《column-template》《column-template》标签插入在《templateslot-scope＝‘scope’》《/template》模板中，具体包括：33.2.1、在创建一个专门进行数据格式化的组件，在页面生命周期为mounted的时候针对父组件传递的类型进行解析处理。34.2.2、根据传递的内容从vuex的state中去查找看数据是否存在，如果存在则直接获取数据；如果在state内没有找到数据，则通过调用vuex的actions异步方法去请求接口获取数据并存储在vuex的state中。35.步骤3、根据数据需要的格式化方案对表格数据格式化组件进行配置，实现数据的定制化转换，具体包括：36.3.1、组件可以通过获取type属性来判断数据字典的数据类型是对象还是数组或者其他结构。37.3.2、知道数据结构之后就根据不同的数据结构来对数据进行格式化的处理。38.本发明中，外部的表格框架的统一封装，内部表头的数据绑定的内容可定制化，确保了页面样式的统一性，也便捷了组件化开发，兼容了个性化的需求；动态数据的渲染通过《slot》插槽进行展示，自定义的去实现表格的内容部分，使得组件更加的通用；对数据格式化方案进行单独封装、对数据进行统一的处理、可以自己添加处理方案，减少了冗余的代码量、更加的简洁和灵活：例如在数据处理的时候，数据字典内的数据以数组的形式去展示、有些接口的数据是以对象的形式去展示亦或者有些数据需要进行字符串转json，都可以根据类型去配置，然后组件判断完数据类型之后按照不同类型数据去处理，就更加的通用；通过vuex状态管理工具对异步数据进行存储，不仅仅优化了数据请求重复性的问题，也提高了页面的运行效率和后端的压力。39.尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本技术公开的原则范围和精神之内。当前第1页12当前第1页12
再多了解一些
本文用于企业家、创业者技术爱好者查询，结果仅供参考。
