1. 程式人生 > 實用技巧 >vue中使用moment時間戳

vue中使用moment時間戳

  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>