antd在嵌套表格中的子表格中添加按钮

在用antd写嵌套表格的时候,大佬提出了一个需求是,在嵌套子表格的表头中增加一个按钮,然后可以动态添加一行数据。
预想设计如下图:
在这里插入图片描述
刚开始想着是用插槽进行按钮的设计,可是实现后的却是每一行都有一个添加按钮,与预期差别的有点大。
然后改成在整个子表格的外面添加一个按钮,点击按钮,出现一个弹窗。
实现如下:
在这里插入图片描述
实现的代码如下:

//子表格的title绑定了一个属性
   <a-table
          slot="expandedRowRender"
          slot-scope="text, record"
          bordered
          :columns="innerColumns"
          :title="onHeaderCell"
          :dataSource="innerData"
          :pagination="false"
        >
          <span slot="innerAction" slot-scope="text, record">
            <a @click="deleteDbUser(record)">删除</a>
          </span>
        </a-table>
 -------------------------------------------------------------------
 属性中返回一个按钮,然后再编写按钮的事件,就可以实现功能了
onHeaderCell(columns) {
      return (
        <div style="text-align:left">
          <el-button onClick={this.add}>新增用户</el-button>
        </div>
      );
    }

猜你喜欢

转载自blog.csdn.net/weixin_39040527/article/details/105786917