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