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 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="width: 200px"
        ></DatePicker>
        <span v-if="this.pageType == 'view'">{{
          ruleForm.birthday | dateformat("YYYY-MM-DD")
        }}</span>
      </FormItem>

  


免責聲明!

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



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