在用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>
);
}