Vue + ant design 实现嵌套子表格

小泡泡c

已于 2022-07-04 13:46:50 修改

阅读量5.3k

点赞数 4

CC 4.0 BY-SA版权

于 2022-04-28 11:30:08 首次发布

本文链接：https://blog.csdn.net/qq_45325810/article/details/124469899

Table - 嵌套子表格

- - 一、效果展示
  - 二、代码实现

一、效果展示

功能1：添加主表格一行
功能2：添加某个子表格一行
功能3：子表格数据的异步加载

在这里插入图片描述

二、代码实现

<template>
  <div>
    <a-button @click="add" type="primary" size="small" style="margin:20px">添加主表格数据</a-button>
    <a-table
      :columns="columns"
      :data-source="data"
      class="components-table-demo-nested"
      @expand="getInnerData"
      @expandedRowsChange="expandedRowsChange"
      style="margin:20px"
    >
      <a slot="operation" slot-scope="row" @click="addInnderData(row)">添加子表格数据</a>
      <a-table
        slot="expandedRowRender"
        slot-scope="inner"
        :columns="innerColumns"
        :data-source="inner.innerData"
        :pagination="false"
      >
        <span slot="operation" slot-scope="text" class="table-operation">
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item>Action 1</a-menu-item>
              <a-menu-item>Action 2</a-menu-item>
            </a-menu>
            <a>
              More
              <a-icon type="down" />
            </a>
          </a-dropdown>
        </span>
      </a-table>
    </a-table>
  </div>
</template>
<script>


const columns = [
  {
    title: 'Name', dataIndex: 'name', key: 'name' },
  {
    title:

最低0.47元/天解锁文章