vue中使用moment時間戳
阿新 • • 發佈:2020-11-12
1. 安裝下載
npm install moment --save
2. 在main.js中引入
import moment from 'moment' /** * 時間戳 */ Vue.filter('dateformat', function (dataStr, pattern = 'YYYY-MM-DD') { return moment(dataStr).format(pattern) })
3. 在頁面中使用
<el-table :data="tableData" border style="width: 100%" empty-text="抱歉~~暫無資料" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" > <el-table-column label="賬號" prop="account" width="150" align="center" /> <el-table-column label="姓名" prop="userName" width="150" align="center" /> <el-table-column label="角色" prop="email" width="200" align="center" /> <el-table-column label="所屬公司" prop="mobile" width="150" align="center" /> <el-table-column prop="status" label="狀態" align="center"> <template slot-scope="scope"> <span v-if="scope.row.status === 1">可用</span> <span v-if="scope.row.status === 0">不可用</span> </template> </el-table-column> <el-table-column label="最後一次登入時間" width="150" align="center"> <template slot-scope="scope"> <span>{{ scope.row.createTime | dateformat("YYYY-MM-DD") }}</span></template> </el-table-column> <el-table-column fixed="right" label="操作" width="200" align="center"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row, 'view')" type="text" size="small" >檢視</el-button > <el-button type="text" size="small" @click="handleClick(scope.row, 'edit')" >編輯</el-button > </template> </el-table-column> </el-table>