Vue element el-table-column標簽中對日期進行格式化(全局過濾器)


1、安裝

npm install vue-moment --save

或者vue項目管理器安裝插件moment依賴

2、在main.js中引用

import moment from 'moment'
Vue.prototype.moment = moment

3、在main.js中加入日期格式化的過濾器,其中dateFormat為方法名稱

Vue.filter('dateFormat',function(dateStr,pattern='YYYY-MM-DD HH:mm:ss'){
  return moment(dateStr).format(pattern);
})

4、普通使用方法,date為參數名,后面dateFormat為方法名稱

<p>{{date | dateFormat}}</p>

但是,在table中需要添加插槽

不加格式化寫法:
<el-table-column prop="date" label="時間"></el-table-column>

加入格式化寫法:

<el-table-column prop="date" label="時間">
    <template slot-scope="scope">{{scope.row.date| dateFormat}}</template>
</el-table-column>
 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM