``` //安裝 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> ```