怎样制作网站建设方案,什么叫营销模式,商会网站设计,四川南充房产网众所周知#xff0c;后端从Mysql取出的数据#xff0c;一般是很难单独处理某一个Key的数据的#xff08;需要处理的话#xff0c;可能会浪费大量的性能。而且对页面加载时间有很大的影响#xff09;#xff0c;所以#xff0c;从数据库取出的数据。只能由前端进行处理。…众所周知后端从Mysql取出的数据一般是很难单独处理某一个Key的数据的需要处理的话可能会浪费大量的性能。而且对页面加载时间有很大的影响所以从数据库取出的数据。只能由前端进行处理。但是在Vue中如果采用了element等组件利用数据绑定的特性也是很难对表格遍历的数据进行单独行的处理的。
我们这边取一个例子来说。比如Mysql datetime 类型的数据与我们一般的显示的形式是不一样的为了用户更好的体验势必需要对时间格式进行转换的。
下图是从mysql中默认取出的datetime 类型时间 我们一般时间显示都是是XXXX年XX月XX日 XXXX的。上图与我们认知习惯很不一样肯定不能这样的。下面我们来做时间的转换。 1 !- 图中列表的.vue -2 template3 div classfromlist4 div classfilter-container5 el-button typeprimary sizesmall新增用户/el-button6 /div7 div8 el-table9 :datatableData
10 border
11 stylewidth: 100% sizesmall
12 el-table-column
13 aligncenter
14 propid
15 label用户ID
16 width100
17 /el-table-column
18 el-table-column
19 aligncenter
20 propusername
21 label用户名
22 width100
23 /el-table-column
24 el-table-column
25 aligncenter
26 propip
27 label用户IP
28 width100
29 /el-table-column
30 el-table-column
31 aligncenter
32 propinittime
33 label注册时间
34 /el-table-column
35 el-table-column
36 aligncenter
37 propendtime
38 label最后登录时间
39 /el-table-column
40 el-table-column
41 aligncenter
42 propisdel
43 label状态
44 /el-table-column
45 /template
46 /el-table-column
47 /el-table
48 /div
49 /div
50 /template 如上是.vue文件中上图列表的代码。我们需要在相应需要处理的el-table-column 列中加上属性项:formatterFunctionName。将该列数据与处理函数进行绑定。下面做一个演示 1 !- 在相应需要处理的el-table-column 中添加formatter属性并绑定了名为formatTime的处理函数 -
2 el-table-column
3 aligncenter
4 propendtime
5 :formatterformatTime
6 label最后登录时间
7 /el-table-column 而后我们在该页面的Vue实例中的methods中编写formatTime函数 1 // row[column.property] 能读取到该行该列的数据。代码中实现了时间格式的转换
2 formatTime(row, column) {
3 const date new Date(row[column.property])
4 return date.getFullYear() 年
5 date.getMonth() 月
6 date.getDate() 日
7 date.getHours() :
8 date.getMinutes()
9 } 函数中的功能可以是各种各样的但是必须return 数据回列表进行显示。其中 row 包含着后端传来的Json数据。column包含着各种辅助数据。其中row[column.property]是可以直接取到该行该列的数据以供处理的。 流程在HTML代码中找到需要处理的el-table-column使用formatter进行函数绑定而后在Vue实例methods中编写函数即可完成处理。
该流程适合大部分表格数据的处理。
本文转载于:猿2048https://www.mk2048.com/blog/blog.php?idjbkj0jtitleVue表格中对数据进行转换、处理
