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