vxe-table 如何格式化單元格內容,全局可複用的格式化方法,日期格式化、單元格模板複用、格式化單元格內容…
一般情況下通過表格渲染列表後,經常需要對單元格的內容進行格式化,比如格式化數值、字典轉換…等,在 vxe-table 支持的格式化有 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:
通過 formatter 進行數據轉換,可以在不改變數據源的情況下自動轉換,僅顯示爲字符串
<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:
模板寫得多了,哎,太麻煩,到處都是複製粘貼!全局 formatter 這時就派上用場 了,接着往下瞅瞅
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:
全局格式化已經可以完美解決問題了,那麼如果想要自定義模板也能全局複用呢?沒問題的,最強的渲染器就此誕生
先來看一個最簡單的 cell-render 單元格渲染器,由於渲染器的功能太多,具體可以去看官方文檔
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'}
]
}
}