[郑州|结业弟子]JS-高世豪|2020年05月29日的日报-技能树.IT修真院

发表于： 2020-05-29 21:35:53

1 2208

一、今天完成的事情

今天主要是把服务器的数据渲染上来，修改了一下表格的样式，重点学习了时间戳的转换，使用了moment插件最后做成了，状态跟类型的转换还没做好

时间戳的转换的方法

我们在前端处理时间戳

1、安装moment插件

npm install moment --save

2、然后在需要格式化日期的组件中引入moment，也可以全局引入，比较省事，首先在main.js中

然后在需要用的组件中的methods中编写日期格式化的方法

<script>import moment from 'moment' # 导入

export default {

name: 'order-list',

props: ['value'],

methods: {

# 编写日期格式化方法

dateFormat: function(row, column) {

console.log(row, column)

const date = row[column.property]

if (date === undefined) {

return ''

}

# 这里的格式根据需求修改

return moment(date).format('YYYY-MM-DD HH:mm:ss')

}

}}</script>

在template中使用

<template>

<div class="workorder-list">

<el-table

:data="value"

border

stripe

style="width: 100%">

<el-table-column

label="申请时间"

prop="apply_time"

:formatter="dateFormat" # formatter为固定写法，dateFormat就是刚写的方法

>

</el-table-column>

<el-table-column

label="完成时间"

prop="complete_time"

:formatter="dateFormat">

</el-table-column>

</template>

</el-table-column>

</el-table>

</div></template>

这样就可以渲染出来了

还有第二种方法，直接在main.js里面来写，在需要引用的地方直接使用，不过我用了这个之后发现，渲染出来的是现在的时间

二、遇到的难点

一开始请求数据的时候，请求到了，本来想的是在父组件请求，点击请求，后来发现向子组件传值的话，非常麻烦，浪费了很长时间，后来突然明白，我直接在子组件里面请求，然后直接渲染就可以了，本来以为渲染出来的id，是请求的每条数据的索引，后来去网站上看发现不是，id就是请求过来的id，直接渲染上去就好了，然后在时间戳的转换的时候，一开始不是用的插件，就很麻烦，不停地计算判断，最后发现，也没法转换过来，应该是我写的有问题，最后发现了moment插件，就看了一下，发现好用，就使用了这个插件，最后是可以了。从后台返回的数据是第一页的数据，只有十条，一开始没想明白，看了一下总共81条，怎么只有十条呢，后来知道是请求回来的第一页，明天看看在分页的那里，渲染其他页出来

三、明天要做的事情

修改状态，类型，请求其他页的数据，写一下新增组件

四、收获

使用moment插件来转换时间戳，element组件的table组件的使用，这个组件不能使用v-for来渲染，只能从你规定的数组里面取值，table加边框样式和斑马样式