介绍
这篇文章主要介绍了怎么在Vue中在表格中对数据进行转换,小编觉得不错,现在分享给大家,也给大家做个参考,一起跟随小编来看看吧!
为什么要使用Vue Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。
& lt; !女人,图中列表的.vue →
,& lt; template>
,& lt; div 类=癴romlist"比;
& lt;才能div 类=癴ilter-container"比;
& lt;才能el-button 类型=皃rimary",大?皊mall"在新增用户& lt;/el-button>
& lt;才能/div>
& lt;才能div>
& lt; el-table才能
,,:data=https://www.yisu.com/zixun/皌ableData”
边境
大?"小">
如上,是.vue文件中,上图列表的代码。我们需要在相应需要处理的& lt; <代码> el-table-column> , & lt; !神;在相应需要处理的el-table-column 中,添加formatter属性,并绑定了名为formatTime的处理函数,→
& lt; el-table-column
,才能使=癱enter"
,才能支撑=癳ndtime"
,,:格式化程序=癴ormatTime"
,,标签=白詈蟮锹际奔洹氨?
,& lt;/el-table-column> 而后,我们在该页面的Vue实例中的方法中编写formatTime函数
,//,行[column.property],能读取到该行该列的数据。代码中实现了时间格式的转换
,formatTime(行,列),{
,,const date =, new 日期(行[column.property])
,,return date.getFullYear(), +, & # 39;年& # 39;+
,,date.getMonth(), +, & # 39;月& # 39;+
,,date.getDate(), +, & # 39;日,& # 39;+
,,date.getHours (), +, & # 39;: & # 39; +
,,date.getMinutes ()
以前,} 函数中的功能可以是各种各样的,但是必须返回数据回列表进行显示。其中连续包含着后端传来的Json数据.column包含着各种辅助数据。其行(列中。地产)是可以直接取到该行该列的数据,以供处理的。
流程:在HTML代码中找到需要处理的el-table-column使用formatter进行函数绑定,而后在Vue实例方法中编写函数,即可完成处理。
该流程适合大部分表格数据的处理。
<>强PS:下面看下Vue表格中时间的处理
Vue中表格的数据应该来自后台数据库,然后从数据库中读取到的数据,时间格式可能有些不同,我们可以根据实际需要来对这个时间进行转化。
这里介绍一个js库,它提供了强大的日期处理功能,功能强大且只有2 k大小。安装方式简单,只需要npm安装fecha——保存即可。
<强>格式(日期格式化)
fecha提供一个格式方法.fecha。格式接收一个日期对象(或一个时间戳)和一个字符串形式的日期格式,然后返回一个字符串(处理后的日期)。
注意:当传入的参数无效时,fecha会报错
<强>解析(日期解析)
fecha另外提供了一个解析方法。和格式类似,fecha。解析接收一个日字符串和一个字符串形式的日期格式,然后返回一个日期对象。
注意:当传入的参数无效时,fecha会报错
fecha还有其他很多功能,这里不做具体介绍,有兴趣请自行百度学习。
<强>这里放一个演示,以供参考。
