vue结合饿了么框架Table表格修改时间戳转为日期+拓展

使用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里面获取到单元格内的内容,然后你再在此方法内通过判断进行返回你需要的内容即可。在前端页面内的表格里即是你返回的内容。

猜你喜欢

转载自blog.csdn.net/weixin_43729943/article/details/108807894