66.《 element-ui两种格式化时间方法的封装》

element-ui两种格式化时间方法的封装

1. 插值表达式的方式渲染

   html

     <div class="bottom"> 
         <p>
           <span>签约时间：</span>
           <span>{{ dateFormat(loginMessInfo.signingTime) }}</span>
           <span>开通时间:</span>
           <span>{{ dateFormat(loginMessInfo.openingTime) }}</span>
           <span>到期时间:</span> 
           <span>{{ dateFormat(loginMessInfo.expireTime) }}</span>
         </p>
       </div>
   

   methods

    // 封装
    dateFormat: function (time) {
         // if(time == "NaN-NaN-NaN NaN:NaN:NaN"){
         //   time = ''
         // }
         var date = new Date(time);
         var year = date.getFullYear();
         /* 在日期格式中，月份是从0开始的，因此要加0
          * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
          * */
         var month =
           date.getMonth() + 1 < 10
             ? "0" + (date.getMonth() + 1)
             : date.getMonth() + 1;
          var day = date.getDate() < 10 ? "0" + date.getDate() :       		  date.getDate();
          var hours =
           date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
           var minutes =
           date.getMinutes() < 10 ? "0" + date.getMinutes() :    			           date.getMinutes();
           var seconds =
           date.getSeconds() < 10 ? "0" + date.getSeconds() :       			    date.getSeconds();
             // 拼接
             return (
               year +
               "-" +
               month +
               "-" +
               day +
               " " +
               hours +
               ":" +
               minutes +
               ":" +
               seconds
             );
       },
   

   使用时用 封装好的函数 dateFormat 对插值表达式进行一个包裹就行

    <span>{{ dateFormat(loginMessInfo.expireTime) }}</span>
   

2. el-table ui组件内部 格式化时间

html

   <!-- 表格数据-->
    <el-table :data="tableData" style="width: 92%"> 
      <el-table-column
        prop="createTime"
        label="结束时间"
        :formatter="formatDate"
      >
      </el-table-column>
    </el-table>

methods

 // 格式化时间
    formatDate(row, column) {
      if(row.createTime == null || row.createTime == undefined){
        return '--'
      } 
      let date = new Date(row.createTime);
      let Y = date.getFullYear() + "-";
      let M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1) + "-"
          : date.getMonth() + 1 + "-";
      let D =
        date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
      let h =
        date.getHours() < 10
          ? "0" + date.getHours() + ":"
          : date.getHours() + ":";
      let m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes() + ":"
          : date.getMinutes() + ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },

在需要的 el-table-column 上添加 :formatter=“formatDate”