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である可能性があるため、文字列長が分かれている.
2.次に、このグローバルなNumberTransformDateフィルタ関数をvueのページで呼び出します.
ここのscope.row.startDateとscope.row.endDateはインタフェースから返されるデータです この2つの列は、テーブルに関連する日付をフィルタする列です.
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つの列は、テーブルに関連する日付をフィルタする列です.
{{scope.row.startDate| NumberTransformDate}}
{{scope.row.endDate| NumberTransformDate}}