vue+elementUIプロジェクトでvueグローバルfilterを使用してtable列データ操作フィルタリングを実現

1494 ワード

使用シーン:プロジェクトでインタフェースデータが返す日付フォーマットがyyyyyymmddhmmssまたはyyyyymmddであるため、tableにyyyy-mm-dd hh:mm:ssおよび yyyy-mm-ddは、カラムでフィルタを使用してこの機能を実現するには、インタフェースが戻るときにデータを操作する必要はありません.
1.main.jsにVueのグローバルフィルタを追加します.このフィルタはパラメータvalがundefinedである可能性があるため、判断を加え始めたばかりで、返されるデータがyymmddである可能性があるため、文字列長が分かれている.
Vue.filter('NumberTransformDate', function (val) {
  if(val){
    if (val.length <= 8 ){
      return (val.slice(0,4) +  "-"  + val.slice(4,6)  + "-" + val.slice(6,8) )
    }else if  (val.length === 14){
      return (val.slice(0,4) +  "-"  + val.slice(4,6)  + "-" + val.slice(6,8) + ' ' + val.slice(8,10) + ':' + val.slice(10,12) + ':' + val.slice(12,14));
    }else {
      return val
    }
  }
});

2.次に、このグローバルなNumberTransformDateフィルタ関数をvueのページで呼び出します.
   ここのscope.row.startDateとscope.row.endDateはインタフェースから返されるデータです  この2つの列は、テーブルに関連する日付をフィルタする列です.