Vue在表格中格式化时间

在获取数据的时候时间显示的方式是毫秒

那么可以通过在Vue原型上过载一个时间的过滤器函数去格式化时间

首先，找到main.js入口文件

Vue.filter('dataFormat',function(originVal){

  const dt= new Date(originVal)

  const y= dt.getFullYear()

  const m=(dt.getMonth()+1+'').padStart(2,'0')  //padStart是字符串方法，首先必须把数据转换成字符串(文中直接拼接一个空字符串从而将数据换成字符串性)，然后才能使用padStart方法。！！padStart接收两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

  const d=(dt.getDate()+1+'').padStart(2,'0')

  const hh =(dt.getHours()+'').padStart(2,'0')

  const mm =(dt.getMinutes()+'').padStart(2,'0')

  const ss=(dt.getSeconds()+'').padStart(2,'0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`

})

dataFormat是函数名，调用的时候调用这个函数名

例如在表格中去格式化时间

 在表格中格式化时间，首先要获取数据，可以通过作用域插槽来获取数据

通过template 中的slot-scope属性来获取数据 然后调用dataFormat函数来格式化时间

<el-table-column label="创建时间" prop="add_time" width='140px'>

            <template slot-scope="scope">

              {{scope.row.add_time | dataFormat}}

            </template>

  </el-table-column>

记录学习，如有指教欢迎评论！