Ant-Design-Vue的tabale组件嵌套应用

原因

最近在使用ant design vue时，遇到一个简单的功能----表格嵌套

去查官方文档，发现他写的很简单，重点是每一组都是写的固定的假数据

那么问题来了，我的数据(二维数组)来了之后，table嵌套，怎么才能让他们渲染到不同的组里面呢

解决

那就查查资料，好好研究下文档吧

先看下官方的例子，内外层的table基本都是正常写的（行列数据都是指定的）

不同的是内层table使用了两个参数，

没错，重点是 slot="expandedRowRender" 和 slot-scope="record, index, indent, expanded" 这两个参数

使用

第一个参数固定不用动，说下第二个参数slot-scope

在这里面又又有四个参数，重点是第一个小参数

• record 外层table的数据记录，或者说这一行的所有数据，如: {outName: '', outId: '', innerData: [{},{}]}
• index 索引，0、1、2…
• indent 缩进（什么玩意啊）
• expanded 展开了没有

所以，看到这里，应该就明白了吧，咱就用第一参数

就是把record中的数据作为dataSource赋给内层的table

就是把record中的数据作为dataSource赋给内层的table

就是把record中的数据作为dataSource赋给内层的table

说三遍

示例

话不多说，看例子

<template>
  <div>
    <a-table :pagination="{defaultPageSize: 999, hideOnSinglePage: true }"
    :columns="outColumns" bordered :dataSource="dataGroups" :rowKey="item => item.groupId"
    >
      <a-table :pagination="{defaultPageSize: 999, hideOnSinglePage: true }"
      :columns="columns"
      slot="expandedRowRender" slot-scope="AAAAAAAAAAAA"
      :dataSource="AAAAAAAAAAAA.groupItem" :rowKey="item => item.pushuserName"
      :locale="{emptyText: '该类别 暂无节点'}"
      >
      <template slot="sex" slot