使用Table表格没必要多废话了,这里我就直接演示如何在Table里将时间戳转为时间。
注意:由于Table表里对应有多行内容,也就是数据源是一个对象数组。所以想要改为数组中的每个对象中的一个字段在进行渲染,我们就只能是在数据渲染的时候进行转换处理。
<el-table
:data="orderList"
style="width: 100%"
@selection-change="selectionChange"
>
<el-table-column
prop="title"
label="标题"
>
</el-table-column>
<el-table-column
prop="time"
:formatter="dateFormat"
label="时间"
width="200"
>
</el-table-column>
<el-table-column>
</el-table-column>
</el-table>
<script>
import moment from 'moment' //在项目根目录下通过npm install moment --save 进行安装
import {
fetchData} from '@/utils/reqs'
export default {
name:"SupplierOrder",
data(){
return{
orderList:[
{
title:'标题1',
time:1687458745 //时间戳
},{
title:'标题2',
time:1687458745 //时间戳
}
],
parms:{
uuid:Cookies.get('UUID')
},
loading:false
}
},
methods:{
dateFormat:function(row, column) {
var date = row[column.property];
if (date == undefined) {
return "";
}
return moment(date).format("YYYY-MM-DD HH:mm:ss");
}
}
}
</script>
在上述代码中,你不需要考虑如何对应改变数组中每个的对象的time字段,饿了么框架加vue是很智能的。
拓展:以上是将时间戳改为日期。当然你也可以通过这种方式,去改变表格内任何一个单元格内的内容。提示,你可以在dateFormat方法里的column里面获取到单元格内的内容,然后你再在此方法内通过判断进行返回你需要的内容即可。在前端页面内的表格里即是你返回的内容。