``` //安装 cnpm i moment --save //引用 import moment from 'moment'; //定义一个常量接受数据 const pattern = 'YYYY-MM-DD hh:mm:ss' //转换时间戳 return moment(时间戳).format(pattern); 注意：时间戳需是 13 位的时间戳 ``` # **案例** ``` <template> <div class="reportt_top"> <a-date-picker v-model:value="startTime" placeholder="起始日期" /> - <a-date-picker v-model:value="endTime" placeholder="截止日期" /> <a-button type="primary" class="search_btn">搜索</a-button> </div> <div class="content"> <a-table :columns="columns" :row-key="(record) => record.id" :data-source="listData" :pagination="pagination" :loading="loading" @change="changeReportData" > <template #name="{ text }"> <a>{{ text }}</a> </template> <template #myAddtime="{ text }"> <a> {{formaTime(text)}} </a> </template> <template #myType="{ text }"> <span v-if="text == 1">正面舆情</span> <span v-if="text == 2">反面舆情</span> </template> <template #action="{ text }"> <a-button type="primary" @click="doEdit(text.key)">编辑</a-button> <a-button type="danger" class="delete">删除</a-button> </template> </a-table> </div> </template> <script lang="ts"> import { defineComponent } from "vue"; import Axios from "axios"; import moment from 'moment'; const columns = [ { title: "标题", dataIndex: "title", key: "title", }, { title: "舆情类型", dataIndex: "type", key: "type", width: 100, slots: { customRender: "myType" }, }, { title: "舆情关键词", dataIndex: "keywords", key: "keyword", }, { title: "舆情网站", dataIndex: "url", key: "url", }, { title: "发现时间", dataIndex: "add_time", key: "add_time", //渲染模板 slots: { customRender: "myAddtime" }, }, { title: "操作", slots: { customRender: "action" }, key: "action", align: "center", }, ]; const listData: any[] = []; export default defineComponent({ name: "Report", data() { return { startTime: "", endTime: "", listData: listData, columns: columns, pagination: { pageSize: 10, //给本地分页用的 total: 20, }, //加载动画 loading: false, //初始化分页为1 page: 1, }; }, methods: { doEdit(data: any) { console.log(data); }, formaTime(value:any){ const pattern = 'YYYY-MM-DD hh:mm:ss' //必须是一个13位时间戳 return moment(value*1000).format(pattern); }, //分页点击触发 changeReportData(event: any) { //得到分页触发的数字 //console.log(event.current) //设置分页数据 this.page = event.current; //调用数据 this.getReportData(); }, //数据重组 getReportData() { this.loading = true; var api = "http://yuqing.itying.com/api/report?page=" +this.page +"&pageSize=" + this.pagination.pageSize; Axios.get(api) .then((response) => { //console.log(response.data.result); this.listData = response.data.result; this.pagination.total = response.data.total; this.loading = false; }) .catch((error) => { console.log(error); }); }, getReportDatas(){ this.loading=true; var api = "http://yuqing.itying.com/api/report?page="+this.page+"&pageSize="+this.pagination.pageSize; this.$axios.get(api).then((response) => { console.log(response) }); } }, //初始化挂载 mounted() { this.getReportData(); this.getReportDatas(); }, }); </script> <style scoped> .reportt_top { padding: 20px 10px; background: #fffbe9; } .search_btn { margin-left: 10px; } .delete { margin-left: 10px; } </style> ```