vue+element表格实现多层数据的嵌套方式

实现多层数据的嵌套方式，可以通过使用Element UI table组件来实现。具体步骤如下：

步骤1：定义表格结构

首先要定义表格的结构，包括表头的内容和渲染每行数据的方式。Vue的template语法可以很方便地组织表格结构，示例代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="课程">
      <template slot-scope="scope">
        <child-table :data="scope.row.subjects"></child-table>
      </template>
    </el-table-column>
  </el-table>
</template>

以上代码中定义了一个el-table组件，通过data属性绑定表格数据，style属性设置表格宽度。接着定义了3个el-table-column组件，分别表示姓名、年龄和课程列，其中课程列的内容需要渲染子表格，这里使用了slot-scope来传递作用域变量，传递了row数据和subjects数据。

步骤2：编写子表格组件

为了渲染课程列的子表格，需要编写一个子表格组件。子表格组件接收一个data属性，用于渲染表格内容。示例代码如下：

<template>
  <el-table :data="data" style="width: 100%">
    <el-table-column prop="name" label="课程名称"></el-table-column>
    <el-table-column prop="score" label="分数"></el-table-column>
  </el-table>
</template>

<script>
  export default {
    props: ['data']
  }
</script>

以上代码中定义了一个el-table组件，通过data属性绑定子表格数据，style属性设置表格宽度。接着定义了2个el-table-column组件，分别表示课程名称和分数列。

示例1：普通的多层数据嵌套方式

在以上定义好表格的结构之后，可以通过如下方式来传递表格数据进行渲染。

<table-component :table-data="[
  {name: '张三', age: 20, subjects: [
    {name: '语文', score: 95},
    {name: '数学', score: 80},
    {name: '英语', score: 90},
  ]},
  {name: '李四', age: 22, subjects: [
    {name: '语文', score: 85},
    {name: '数学', score: 90},
    {name: '英语', score: 80},
  ]}
]"></table-component>

以上代码是一个普通的多层数据嵌套的例子，将数据通过tableData属性传递给表格组件即可实现多层表格数据的嵌套。具体使用示例可以参考Element UI 官网的表格组件。

示例2：数据动态加载方式

如果数据是动态从服务器加载的，可以通过vue的异步组件来实现组件动态加载。示例代码如下：

Vue.component('table-component', function (resolve, reject) {
  // 模拟异步请求数据
  setTimeout(() => {
    resolve({
      template: `
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column label="课程">
            <template slot-scope="scope">
              <child-table :data="scope.row.subjects"></child-table>
            </template>
          </el-table-column>
        </el-table>
      `,
      data: function () {
        return {
          tableData: [
            {name: '张三', age: 20, subjects: [
              {name: '语文', score: 95},
              {name: '数学', score: 80},
              {name: '英语', score: 90},
            ]},
            {name: '李四', age: 22, subjects: [
              {name: '语文', score: 85},
              {name: '数学', score: 90},
              {name: '英语', score: 80},
            ]}
          ]
        }
      },
      components: {
        'child-table': {
          template: `
            <el-table :data="data" style="width: 100%">
              <el-table-column prop="name" label="课程名称"></el-table-column>
              <el-table-column prop="score" label="分数"></el-table-column>
            </el-table>
          `,
          props: ['data']
        }
      }
    });
  }, 1000);
});

// 使用异步组件
<async-component is="table-component"></async-component>

以上代码是使用异步组件的例子，异步组件可以接收一个resolve回调函数和一个reject回调函数作为参数，resolve回调函数将异步组件的定义作为参数传递给它，然后在数据加载完成后再统一进行渲染。这种方式可以减少页面首次加载时的数据请求压力，提升用户体验。具体使用示例可以参考Vue 官网的异步组件。