Vueプロジェクト機能実装:Element UIテーブルコンテンツフォーマットスキーム


前言
Vueプロジェクトでは、インタフェースデータに基づいて表の内容をフォーマットすることがよくあります.たとえば、インタフェースはタイムスタンプフォーマット1560565657109を返し、表は'2019.06.15 10:27:37'として表示されます.次に、3つのフォーマットデータのシナリオを紹介し、使用シーンを簡単に説明します.プロジェクトで迅速な開発を正確に位置づけることができるようにしたいと思います.
1.表列属性formatter
数値変更のみが必要な場合、element-uiテーブル列属性formatterによって直接実現することができる.





export default {
    data () {
        return {
            data: [{
                name: '  ',
                height: '160',
                weight: '80'
            }, {
                name: '  ',
                height: '176',
                weight: '65'
            }]
        }
    },
    methods: {
        bmiFormatter (row, column, cellValue, index) {
            // row:    
            // column:    
            // cellValue:       
            // index:    ,  :2.3.9      。
            return (row.weight / Math.pow((row.height / 100), 2)).toFixed(1)
        }
    }
}

2.ラベルtemplate
表の内容がインタフェースデータの必要に応じて色などのスタイルを変更する場合、