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-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>