Antd表格customRender与scopedSlots同时使用

行列合并与插槽同时使用
普通的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)}

猜你喜欢

转载自blog.csdn.net/weixin_45653441/article/details/125619400