行列合并与插槽同时使用
普通的table插槽是在column对象中配置scopedSlots: { customRender: ‘xxx’ },并在标签中写相应的代码实现的,与此处关系不大,不做过多的介绍。
行列合并时要对customRender做配置,相应单元格的重写则需要写在customRender返回的children中,使用的是类似React的jsx语法:
例子如下,我希望在实现行合并的同时操作按钮有二次确认事件
{
title: '操作',
dataIndex: 'operation',
// scopedSlots: { customRender: 'operation' },
fixed: 'right',
align: 'center',
width: 150,
customRender: (text, record, index) => {
var childrenVal
// record.auditStatus返回得是0/1 此处已经转换状态
if (record.auditStatus == '已审核') {
childrenVal = (
<div>
<a-button size="small" disabled style="margin-right:10px">
已审核
</a-button>
<a-popconfirm title="确定重置吗?" onConfirm={() => this.leaveCong(record)} placement="topRight">
<a-button size="small" style="background: #32cd32; border-color: #32cd32; color: #fff;">
重置
</a-button>
</a-popconfirm>
</div>
)
} else {
childrenVal = (
<div>
<a-popconfirm title="确定审核吗?" onConfirm={() => this.leaveShen(record)} placement="topRight">
<a-button size="small" style="background: #faad14; border-color: #faad14; color: #fff;margin-right:10px">
未审核
</a-button>
</a-popconfirm>
<a-button size="small" disabled>
重置
</a-button>
</div>
)
}
const obj = {
children: childrenVal,
attrs: {
rowSpan: record.rowNum,
},
}
return obj
},
},
效果如图:
如果需要对插槽中的元素添加事件:
onConfirm={() => this.leaveCong(record)} / onClick={() => this.leaveCong(record)}