vue2 element ui table表格渲染数据时，需要渲染两级表格，先渲染一级表格，然后展开下拉后，再渲染二级表格。

<el-table
    ref="singleTable"
    :data="list"
    border
    height="100%"
    row-key="id"
    :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
    @row-click="handleRowClick"
    :row-class-name="tableRowClassName"
    style="width: 100%">
  <el-table-column
      property="index"
      label="排名"
      width="80"
      align="center">
    <template slot-scope="scope">
      <div style="color: #FFB832;display: inline-block">{{ scope.row.index }}</div>
    </template>
  </el-table-column>
</el-table>

数据列表

这列我们需要渲染的列表二级数据是child字段。我们通过:tree-props="{children: 'child', hasChildren: 'hasChildren'}"来指定二级字段的字段名。我们还需要指定一下row-key="id"

list:[
  {
    "child": [
      {
        "id": 1,
      }
    ],
    "id": "2",
  },
  {
    "child": [
      {
        "id": 3,
      }
    ],
    "id": "4",
  },
  ]