Ant-Design-Vue的tabale組件（expandedRowRender）嵌套應用

需求

開發一個后台查看上下級推廣關系的數據展示（我一個后端干這么復雜的事情），關系有好幾層，用的是ant design vue框架，剛好看到有---表格嵌套，不過官方文檔寫的很簡單，每一組都是寫的固定的假數據，網上查看帖子找到一個方法

在expand事件中給子table賦值，不過有個問題是，每個上級下面的子數據都一樣，只能繼續網上扒拉帖子

 

 

功夫不負有心人，讓我看到一篇文章很不錯 原文地址：https://blog.csdn.net/qq_35771567/article/details/101052447

先看下官方的例子，內外層的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-scope="text">{{text || '你是太監嗎'}}</template>
      </a-table>
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataGroups: [
        {
          groupName: '第一組',
          groupId: 'abc001',
          groupItem: [
            {
              id: 'aa3r',
              name: '張三',
              sex: '女',
              age: 19,
            },
            {
              id: 'sadfv',
              name: '張三',
              sex: '',
              age: 19,
            },
            {
              id: 'adbrb',
              name: '張三',
              sex: '男',
              age: 19,
            },
          ],
        },
        {
          groupName: '第二組',
          groupId: 'abc002',
          groupItem: [
            {
              id: 'ewtgfc',
              name: '李四',
              sex: '男',
              age: 19,
            },
            {
              id: 'adsbvx',
              name: '李四',
              sex: '男',
              age: 19,
            },
            {
              id: 'abazx',
              name: '李四',
              sex: '男',
              age: 19,
            },
          ],
        },
        {
          groupName: '第三組',
          groupId: 'abc003',
          groupItem: [
            {
              id: 'abdszcxx',
              name: '王五',
              sex: '男',
              age: 19,
            },
            {
              id: 'advzx',
              name: '王五',
              sex: '男',
              age: 19,
            },
            {
              id: 'advzxxxc',
              name: '王五',
              sex: '男',
              age: 19,
            },
          ],
        },
        {
          groupName: '第四組',
          groupId: 'abc004',
          groupItem: [
            {
              id: 'aaaaaav',
              name: '趙六',
              sex: '男',
              age: 19,
            },
            {
              id: 'abdddddddd',
              name: '趙六',
              sex: '男',
              age: 19,
            },
            {
              id: 'abvzxsad',
              name: '趙六',
              sex: '男',
              age: 19,
            },
          ],
        },
      ],
      outColumns: [{
        title: '小組名稱',
        dataIndex: 'groupName',
      }, {
        title: '小組ID',
        dataIndex: 'groupId',
      }],
      columns: [
        {
          title: '組員姓名',
          dataIndex: 'name',
        }, {
          title: '性別',
          dataIndex: 'sex',
          scopedSlots: { customRender: 'sex' },
        }, {
          title: '年齡',
          dataIndex: 'age',
        },
      ],
    }
  },
}
</script>

是不是很一目了然