526互联

ant table customRender 使用方法记录

发布时间 2023-03-31 15:24:01作者: 落花看风雪

"customRender" 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引

Function({text, record, index, column}) {}

使用场景:序号,单元格合并,

script:
import Vue from 'vue',
const h = new Vue().createElement;
// 表头
columns: [
    {
        title: '序号',
        key: 'rowIndex',
        customRender: function (t, r, index) {
            return parseInt(index) + 1
        }
    },
　　// 使用插槽
　　{
　　　　...
　　　　scopedSlots: { customRender: 'time' }
　　},
　　// 插入HTML元素
　　{
　　　　title: '是否存在',
　　　　dataIndex: 'isLive',
　　　　customRender: (t, r) => {
　　　　　　return h('span', {class: t ? 'green': ''}, t : '是', '否')
　　　　}
　　},
]

// 单元合并
customRender: (t, r, index) => {
return {
children: t,
attrs: {
colSpan: r.id ? 1: 0
},
style: {
textAlign: t ? 'center' : 'left'
}
}


html:
<a-table :columns="columns">
　　<template solt="time" slot-scope="text">
　　　　{{text}}
　　</template>
</table>