时间:2022-12-10 12:10:26 | 栏目:vue | 点击:次
在vue表格中如果直接绑定时间字段默认显示格式一般为:yyyy-MM-dd HH:mm:ss,但有时候只需要显示 年月日 或者 时分秒,这时我们就可以用到过滤器(filter)
<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> </el-table>
<el-table :data="tableData" style="width: 100%"> <el-table-column label="日期" width="180"> <template slot-scope="scope"> <span>{{ scope.row.date | FormatDate('HH:mm:ss') }}</span> </template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> </el-table>
这里把时间转换成 年:月:日 格式
// main.js function formatDate(date, fmt) { date = new Date(date); if (typeof(fmt) === "undefined") { fmt = "yyyy-MM-dd HH:mm:ss"; } if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'H+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() } for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + '' fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length)); } } return fmt }; //定义一个时间过滤器 Vue.filter("FormatDate", function(date, fmt) { return formatDate(date, fmt); });
over~