vxe-table format method how to format the cell contents of the global reusable
By rendering the table listing general, often need to format the content of a cell, such as numeric format, converting the dictionary ... etc., in vxe-table there are n supported formatting, different scenarios can be selected in an optimal manner
method 1:
Direct conversion of source data, the optimal performance of the embodiment, the relative redundancy wording
<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')
})
}
}
Method 2:
By formatter for data conversion, it can be converted automatically without changing the source data is displayed only as a string
<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')
}
}
}
Method 3:
For the above shortcomings, so if you want to customize HTML format it, then you can use to customize the format slot
<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'}
]
}
}
Method 4:
Template write more, hey, too much trouble, copy and paste everywhere! Global formatter then come in handy, and then down to Chou Chou
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'}
]
}
}
Method 5:
Global format has been perfectly solve the problem, so if you want a custom template can also be a global reuse it? No problem, the strongest renderer was born
first look at a simple cell-render cell renderer, because too many functions renderer, specifically to see the official documentation
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'}
]
}
}