vue 基於element組件庫實現表格下多個子級展示

實現效果

<template>
  <div class="content-right-table">
    <el-table
      ref="tableData"
      :data="tableData"
      tooltip-effect="light"
      style="width: 100%"
      @expand-change="handle_list"
    >
      <el-table-column prop="children" type="expand" width="100">
        <template slot-scope="slots">
          <el-table
            ref="subTableData"
            :data="slots.row.children"
            tooltip-effect="light"
            @expand-change="handle_subList"
          >
            <el-table-column prop="children" type="expand" width="100">
              <template slot-scope="scopes">
                <el-table ref="secSubTableData" :data="scopes.row.children" tooltip-effect="light">
                  <el-table-column prop="portNumber" label="編號" />
                  <el-table-column prop="name" label="名稱" />
                  <el-table-column prop="ip" label="IP" />
                  <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                      <el-button type="text" class="primary-text" @click="handle_edit(scope.row)">編輯</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="編號" />
            <el-table-column prop="size" label="大小" />
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button type="text" class="danger-text" @click="handle_delete(scope.row)">刪除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column label="ID" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.rtuId }}</template>
      </el-table-column>
      <el-table-column label="名稱" show-overflow-tooltip>
        <template slot-scope="scope">
          <div @click="handle_jump(scope.row)">
            <span size="medium">{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="count" label="數量" />
    </el-table>
  </div>
</template>

js部門
tableData: [
        {
          rtuId: '4564651',
          children: [
            {
              children: [
                {
                  portNumber: '001',
                  name: '001',
                  ip: '001',
                  portNumber: '001',
                },
              ],
              number: 132123,
              size: 1231231,
            },
          ],
          name: 'fdsf',
          count: '123121',
        },
        {
          rtuId: '4564651',
          children: [
            {
              children: [
                {
                  portNumber: '001',
                  name: '001',
                  ip: '001',
                  portNumber: '001',
                },
              ],
              number: 132123,
              size: 1231231,
            },
          ],
          name: 'fdsf',
          count: '123121',
        },
      ],

樣式比較丑,大家需要的自己調整