セルの内容をフォーマットする方法VXE-テーブル形式の方法、グローバル再利用可能

VXEテーブルグローバル再利用可能なのセルの内容をフォーマットする方法フォーマット方法

一般的な一覧表をレンダリングすることによって、多くの場合、等...辞書を変換する、そのような数値形式として、セルの内容をフォーマットする必要があり、中VXEテーブル Nフォーマットがサポートされ、異なるシナリオが最適な方法で選択することができます

方法1：

ソースデータの直接変換、実施形態の最適なパフォーマンス、相対冗長文言

<vxe-table :data="tableData">
  <vxe-table-column field="name" title="Name"></vxe-table-column>
  <vxe-table-column field="amount" title="Amount"></vxe-table-column>
  <vxe-table-column field="sex" title="Sex"></vxe-table-column>
  <vxe-table-column field="date" title="Date"></vxe-table-column>
</vxe-table>

export default {
	data () {
		tableData: [
		 {name: 'Test1', amount: 1024.7895, sex: '1', date: '2020-01-01T10:30:20.000+0800'},
		 {name: 'Test2', amount: 512.056, sex: '0', date: '2020-01-02T08:40:30.000+0800'}
		]
	},
	created () {
		this.tableData.forEach(item => {
			item.amount = item.amount.toFixed(2)
			item.sex = item.sex === '1' ? '男' : '女'
			item.date = XEUtils.toDateString(item.date, 'yyyy-dd-MM')
		})
	}
}

方法2：

フォーマッタデータ変換のために、文字列としてのみ表示されるソースデータを変更せずに自動的に変換することができます。

<vxe-table :data="tableData">
  <vxe-table-column field="name" title="Name"></vxe-table-column>
  <vxe-table-column field="amount" title="Amount"></vxe-table-column>
  <vxe-table-column field="sex" title="Sex" :formatter="fotmatSex"></vxe-table-column>
  <vxe-table-column field="date" title="Date" :formatter="formatDate"></vxe-table-column>
</vxe-table>

export default {
	data () {
		tableData: [
		 {name: 'Test1', amount: 1024.7895, sex: '1', date: '2020-01-01T10:30:20.000+0800'},
		 {name: 'Test2', amount: 512.056, sex: '0', date: '2020-01-02T08:40:30.000+0800'}
		]
	},
	methods: {
		fotmatSex ({ cellValue }) {
			return cellValue  === '1' ? '男' : '女'
		},
		formatDate ({ cellValue }) {
			return XEUtils.toDateString(cellValue, 'yyyy-dd-MM')
		}
	}
}

方法3：

カスタマイズしたい場合は、上記の欠点のために、そのHTMLの形式で、それを、あなたはフォーマットスロットをカスタマイズするために使用することができます

<vxe-table :data="tableData">
  <vxe-table-column field="name" title="Name"></vxe-table-column>
  <vxe-table-column field="amount" title="Amount"></vxe-table-column>
  <vxe-table-column field="sex" title="Sex">
  	<template v-slot="{ row }">
  		<span style="color: red">{{ row.sex === '1' ? '男' : '女' }}</span>
  	</template>
  </vxe-table-column>
  <vxe-table-column field="date" title="Date"></vxe-table-column>
</vxe-table>

export default {
	data () {
		tableData: [
		 {name: 'Test1', amount: 1024.7895, sex: '1', date: '2020-01-01T10:30:20.000+0800'},
		 {name: 'Test2', amount: 512.056, sex: '0', date: '2020-01-02T08:40:30.000+0800'}
		]
	}
}

方法4：

テンプレートの書き込みより、ちょっと、あまりにも面倒、コピーしてどこにでも貼り付けます！グローバルは、フォーマッタそして便利になるし、その後ダウンシュシュへ

import VXETable from 'vxe-table'

VXETable.formats.add('fotmatSex', cellValue => {
  return cellValue  === '1' ? '男' : '女'
})
VXETable.formats.add('formatDate', cellValue => {
  return XEUtils.toDateString(cellValue, 'yyyy-dd-MM')
})

<vxe-table :data="tableData">
  <vxe-table-column field="name" title="Name"></vxe-table-column>
  <vxe-table-column field="amount" title="Amount"></vxe-table-column>
  <vxe-table-column field="sex" title="Sex" formatter="fotmatSex"></vxe-table-column>
  <vxe-table-column field="date" title="Date" formatter="formatDate"></vxe-table-column>
</vxe-table>

export default {
	data () {
		tableData: [
		 {name: 'Test1', amount: 1024.7895, sex: '1', date: '2020-01-01T10:30:20.000+0800'},
		 {name: 'Test2', amount: 512.056, sex: '0', date: '2020-01-02T08:40:30.000+0800'}
		]
	}
}

方法5：

グローバル形式は完全にカスタムテンプレートをしたいのであれば、それがグローバル再利用することができ、問題を解決してきましたか？いいえ問題は、最強のレンダラが生まれなかった
シンプルで初見のセルレンダリングあまりにも多くの機能がレンダラので、特に見るために、セルレンダラーを公式ドキュメントを

import VXETable from 'vxe-table'
import XEUtils from 'xe-utils'

VXETable.renderer.add('MyDate', {
	renderDefault (h, renderOpts, params) {
		const { row, column } = params
		return [
			<span>{ XEUtils.toDateString(row[column.property], 'yyyy-dd-MM') }</span>
		]
	}
})

<vxe-table :data="tableData">
  <vxe-table-column field="name" title="Name"></vxe-table-column>
  <vxe-table-column field="amount" title="Amount"></vxe-table-column>
  <vxe-table-column field="sex" title="Sex"></vxe-table-column>
  <vxe-table-column field="date" title="Date" cell-render="{name: 'MyDate'}"></vxe-table-column>
</vxe-table>

export default {
	data () {
		tableData: [
		 {name: 'Test1', amount: 1024.7895, sex: '1', date: '2020-01-01T10:30:20.000+0800'},
		 {name: 'Test2', amount: 512.056, sex: '0', date: '2020-01-02T08:40:30.000+0800'}
		]
	}
}