Vue实现了表格形式的数据转换和处理方法

众所周知，后端从Mysql中获取的数据一般很难单独处理某个Key的数据(如果需要处理，可能会浪费大量性能。而且对页面加载时间影响很大)，所以从数据库中检索数据。只能由前端处理。但是，在Vue中，如果使用element等组件，则很难利用数据绑定的特性，在单行中处理表遍历的数据。

我们举个例子。比如Mysql datetime类型的数据与我们一般的显示形式不同，为了更好的用户体验，需要转换时间格式。

下图是默认情况下从mysql中取出的日期时间类型时间

我们一般的时间显示是XXXX，XX，XX，xx: xx。上图和我们的认知习惯很不一样，肯定不可能是这样的。让我们做时间的转换。

！-.vue-template Div class=' from list ' Div class=' filter-container ' El-button type=' primary ' size=' small ' new user/El-button/Div El-table : data=' table data '边框样式=' width : 100% ' size=' small ' El-table-column align=' center ' prop=' username ' label=' user ID ' width=' 100 '/El-table-column El-table align=' center ' prop=' username ' label=' El-table-column El-table-column align=' center ' prop=' init time ' label=' registration time '/El-table-column El-table-column align=' center ' prop=' init time ' label=' status '/El-table-column/template/El-column/El-table/div/template如上，是中的代码。 上图中列出的vue文件。我们需要在要处理的相应el-table-column列中添加属性项：formatter=FunctionName。将列数据与处理函数绑定。这里有一个演示：

！-在要处理的相应El-table-列中添加formatter属性。并绑定名为format time-El-table-column align=' center ' prop=' end time ' : format time=' format time ' label='上次登录时间'/el-table-column的处理函数。然后，我们在这个页面的Vue实例的方法中编写formattime函数

//row[column.property]可以读取该行和该列的数据。时间格式的转换在代码中实现。格式时间(行，列){常量日期=新日期(行[列。属性])返回date . getfull year()“year”date . getmonth()“month”date . getdate()函数在' date。gethours ()' : '日期。getminutes ()}函数可以变化，但是数据必须返回到列表中才能显示。行包含来自后端的Json数据。列包含各种辅助数据。其中行[column.property]可以直接获取行和列的数据进行处理。

流程：在HTML代码中找到要处理的el-table-column，用formatter绑定函数，然后在Vue实例方法中写入函数完成处理。

这个过程适用于处理大多数表格数据。

PS:我们来看看Vue表中对时间的处理

Vue中的表数据应该来自后台数据库，然后从数据库中读取的数据可能有不同的时间格式，所以我们可以根据实际需要转换这个时间。

本文介绍了一个js库，它提供了强大的数据处理功能。它功能强大，只有2k大小。安装方法很简单，只需要npm安装fecha - save。

格式(日期格式)

Fecha提供了一种格式化方法。Fecha.format接收一个日期对象(或时间戳)和一个字符串形式的日期格式，然后返回一个字符串(已处理的日期)。

注意：当传入的参数无效时，fecha将报告错误

解析(日期解析)

Fecha还提供了一个解析方法。与格式类似，fecha.parse接收一个日期字符串和一个字符串形式的日期格式，然后返回一个日期对象。

注意：当传入的参数无效时，fecha将报告错误

Fecha还有很多其他功能，这里就不介绍了。如果你感兴趣，请通过百度了解。

这里有一个演示供参考。

超文本标记语言

El-table-columnprop=' time '标签=' time ' : formatter=' date format '最小宽度=' 100'/El-table-columnjs

methods: { dateFormat(行、列、单元格值){ return cellValue？fecha.format(新日期(单元格值)，' YYYY-MM-DD '):“”；}}摘要

以上就是边肖介绍的Vue实现形式中数据转换处理的方法，对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！