Ant Design Vue子表格展开折叠及传值

首先这是你想实现的效果嘛？

如果是的话看这篇就够了，我会写的很详细！

第一步在表格里插入一个表格

1. <a-table
   :expandRowByClick="true"
   :columns="columns"
   :data-source="datas"
   :loading="loading"
   @expand="zi"
   >
   <template #expandedRowRender="{ record }">
    <a-table
     size="small"
    :expandRowByClick="true"
    :columns="columns2"
    :data-source="data2"
    :loading="loading"
    />
   </template>
 </a-table>

关键属性：

#expandedRowRender：这个是负责让列表可以折叠的属性

record：这个则是点击行的所有属性；如果不懂表格如何插入的话请点击，蓝色字体我教你

@expand：点击展开图标时触发（这是官网的说法，但我自己用的过程中是点击列表行就触发），可以获取到行的数据，有两个回调参数，Function(expanded(布尔值), record(行的数据))

调取数据

const zi = (expanded, record) => {
      if (expanded) {
        data2.value = [];
        delAxios
          .get({
            url: `http://*****`,
          })
          .then((res) => {
            data2.value = res.data.list;
          });
      }

下面是回调返回的数据：

这里因为点击就会触发这个函数，所以我用了一个判断，为true时才请求数据

最后

认识一下吧？你的关注是博主创作的最大动力，感谢！

• 想跟博主交朋友的可以查找，公_号❤：前端老实人，跟博主一起探讨学习❤