Vue3.0 encapsula la función de tubería de formato de fecha (filtro)

Prefacio:

Recientemente, la compañía actualizó su pila de tecnología y cambió gradualmente del angular original al popular vue 3.0 actual. Los siguientes códigos están todos desarrollados en base al entorno Vue3.0+ant+TypeScript+Vite+less

Introducción a vue3.0

No haré demasiadas descripciones aquí, si lo necesita, puede ir al sitio web oficial vue3.0 para ver aquí

Filtro Vue3.0 (filtro)

Para la narrativa y algunos casos, puede ver la descripción del filtro en vue3.0
aquí.De la descripción en el sitio web oficial, podemos ver que si usamos el filtro global para agregar filtros, no es necesario. ya no me gusta el período 2.0 Puede usar el carácter de barra vertical (|) para formatear los datos, pero en su lugar úselo como una llamada a un método, por lo que podemos usar un método público para reemplazar el método de escritura anterior, echemos un vistazo a mi código

const DateFormatPipe = (date: Date, type: String) => {
    
    
    if (date) {
    
    
      let year, month, day, HH, mm, ss;
      let time = new Date(date);
      let timeDate;
      year = time.getFullYear(); // 年
      month = time.getMonth() + 1; // 月
      day = time.getDate(); // 日
      HH = time.getHours(); // 时
      mm = time.getMinutes(); // 分
      ss = time.getSeconds(); // 秒
  
      month = month < 10 ? '0' + month : month;
      day = day < 10 ? '0' + day : day;
      HH = HH < 10 ? '0' + HH : HH; // 时
      mm = mm < 10 ? '0' + mm : mm; // 分
      ss = ss < 10 ? '0' + ss : ss; // 秒
  
      switch (type) {
    
    
        case 'yyyy':
          timeDate = String(year);
          break;
        case 'yyyy-MM':
          timeDate = year + '-' + month;
          break;
        case 'yyyy-MM-dd':
          timeDate = year + '-' + month + '-' + day;
          break;
        case 'yyyy/MM/dd':
          timeDate = year + '/' + month + '/' + day;
          break;
        case 'yyyy-MM-dd HH:mm:ss':
          timeDate = year + '-' + month + '-' + day + '' + HH + ':' + mm + ':' + ss;
          break;
        case 'HH:mm:ss':
          timeDate = HH + ':' + mm + ':' + ss;
          break;
        case 'MM':
          timeDate = String(month);
          break;
        default:
          timeDate = year + '-' + month + '-' + day;
          break;
      }
      return timeDate;
    } else {
    
    
      return '';
    }
  };
  export default DateFormatPipe;
  

Al usarlo, lo usamos directamente en el componente (al que se hace referencia en el archivo .vue) y luego lo usamos en la plantilla

// 这里要写你自己的文件路径
// 注意我这里这样导入是因为我在文件导出时写了default，否则应该是import {} from ''
import DateFormatPipe from "../../utils/dateFormat.pipe";

utilizado en la plantilla

<a-table :loading="loading" rowKey="bizId" :data-source="loanCvmInfoList" :columns="columns" :pagination="false"
                :scroll="{ y: 240 }" :rowClassName="setRowClassName" :customRow="rowClick">
   <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'amount'">
          <span>{
   
   { NumberFormatPipe(record.amount, 2) }}</span>
      </template>
      <template v-if="column.key === 'beginDate'">
          <span>{
   
   { DateFormatPipe(record.beginDate, 'yyyy-MM-dd') }}</span>
      </template>
      <template v-if="column.key === 'dueDate'">
           <span>{
   
   { DateFormatPipe(record.dueDate, 'yyyy-MM-dd') }}</span>
       </template>
   </template>
</a-table>