vxetable显示html,vxe-table 如何格式化单元格内容，全局可复用的格式化方法

vxe-table 如何格式化单元格内容，全局可复用的格式化方法

一般情况下通过表格渲染列表后，经常需要对单元格的内容进行格式化，比如格式化数值、字典转换…等，在 vxe-table 支持的格式化有 n 种，不同场景可以选择最优的方式

方法1：

直接对源数据进行转换，该方式的性能最优，写法相对冗余

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 进行数据转换，可以在不改变数据源的情况下自动转换，仅显示为字符串

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 格式呢，这时就可以用插槽来自定义格式

{{ row.sex === '1' ? '男' : '女' }}

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')

})

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 [

{ XEUtils.toDateString(row[column.property], 'yyyy-dd-MM') }

]

}

})

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'}

]

}

}

标签：01,格式化,name,vxe,单元格,0800,sex,amount,date

来源： https://blog.csdn.net/xlz26296/article/details/104710853