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=" 100%"
empty-text="抱歉~~暂无数据"
:header-cell-style="{ background: '#eef1f6', color: '#606266' }"
>
<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>
5. 在普通标签中使用
<FormItem label="生日:" prop="birthday"> <DatePicker :editable="false" type="date" v-if="this.pageType != 'view'" v-model="ruleForm.birthday" :start-date="new Date()" placeholder="选择日期" style=" 200px" ></DatePicker> <span v-if="this.pageType == 'view'">{{ ruleForm.birthday | dateformat("YYYY-MM-DD") }}</span> </FormItem>