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
表の内容がインタフェースデータの必要に応じて色などのスタイルを変更する場合、
。
{{ scope.row.scores }}
export default {
data () {
return {
data: [{
name: ' ',
scores: '86'
}, {
name: ' ',
scores: '59'
}]
}
}
}
3. template filters
, Vue filters
の み わせによって される がある.
{{ scope.row.gender | genderFormatter }}
export default {
data () {
return {
data: [{
name: ' ',
gender: 'male'
}, {
name: ' ',
gender: 'female'
}]
}
},
filters: {
genderFormatter (gender) {
const map = {
male: '♂',
female: '♀'
}
return map[gender]
}
}
}
: Element UIテーブル:https://element.eleme.cn/2.9/... Vueスロット:https://cn.vuejs.org/v2/guide... Vueフィルタ:https://cn.vuejs.org/v2/guide...