在Vue项目中，将服务器API接口获取的时间数据（时间戳ms）转换为年-月-日的格式_vue获取一个接口的请求时间

一、将如下左图显示的时间戳格式的时间数据转换为右图年-月-日格式的时间数据

二、 发送axios请求，向服务器请求API接口数据。

（注意：请求状态成功码与请求地址和请求参数都是根据API接口文档的要求设置，但都是固定写法）例如：获取商品列表数据，代码如下：

（1）在项目入口文件（main.js）处导入axios的包，并在项目中全局挂载

import axios from 'axios'
Vue.prototype.$http = axios

（2） 在需要获取数据的相关组件的methods方法配置中发送Axios请求，获取API接口数据。

methods: { 
// 获取商品列表数据
        async getGoodsList() {
            //发送get请求，$http方法就是在VUE项目入口文件处进行了全局注册
            const { data: res } = await this.$http.get('goods', { params: this.goodsInfo });
            //状态成功码为200
            if (res.meta.status !== 200) {
                return this.$message.error('获取商品列表数据失败');
            }
            // this.$message.success('获取商品列表数据成功');
            // console.log(res);
            this.goodsList = res.data.goods;
            this.total = res.data.total;
        },
}

三、在项目开发入口文件（main.js）处注册一个全局过滤器，代码如下：

// 注册一个全局过滤器(将得到的数据ms转为时间(年月日))
Vue.filter('dataFormat', function (originVal) {
  const dt = new Date(originVal);
  // 年
  const year = dt.getFullYear();
  // 转换出来的month默认是从0开始的,设置显示为两位数，不足的就用0来填充
  // 月
  const month = (dt.getMonth() + 1 + '').padStart(2, '0');
  // 日
  const day = (dt.getDate() + '').padStart(2, '0');
  // 时
  const hour = (dt.getHours() + '').padStart(2, '0');
  // 分
  const minutes = (dt.getMinutes() + '').padStart(2, '0');
  // 秒
  const seconds = (dt.getSeconds() + '').padStart(2, '0');
  // 拼接时间数据
  return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
});

四、以element-ui组件为例，在HTML中插入表格，在表格区域实现时间的自定义渲染。使用插值语法，在需要呈现数据的区域写入如下代码。template在这作为作用域插槽， slot-scope获取表格当前行的数据。

 <template slot-scope="scope">{{scope.row.add_time | dataFormat}}</template>

<!-- 渲染用户列表区域 -->
        <el-table
        :data="goodsList"
        border
        stripe
        style="width: 100%">
        <el-table-column prop="goods_price" label="商品价格（元）"  align="center" width="105px"></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量"  align="center"></el-table-column>
        <el-table-column prop="add_time" label="创建时间"  align="center">
            <!-- 实现时间的自定义渲染 -->
            <template slot-scope="scope">
               {{scope.row.add_time | dataFormat}}
            </template>
        </el-table-column>
        </el-table>