eltable树形数据 只用三层

### 实现 `el-table` 树形数据结构仅展示三级

为了使 `el-table` 的树形数据显示不超过三个层次，可以通过设置特定属性来控制子项的展开逻辑。具体来说，在定义表格时需注意以下几个方面：

- **row-key**: 唯一标识每一行的关键字。
- **children 属性名**: 定义子节点数组的名字，默认为 "children"。
- **lazy 和 load 方法**: 对于懒加载模式下的树形数据，通过自定义加载函数决定何时停止加载更多层级。

对于非懒加载的情况，主要依靠前端过滤机制阻止超过指定级别的子元素被渲染出来。下面给出一段基于 Vue.js 和 Element UI 库的例子代码片段用于说明如何限定最大显示级别为三：

<template>
  <div id="app">
    <!-- 使用 :data.sync 同步绑定 data -->
    <el-table :data="tableData.slice(0, maxLevel)" row-key="id" border style="width: 100%">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      
      <!-- 配置 children 字段名称 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table v-if="!exceedsMaxDepth(props.row.children || [])"
                    :data="(props.row.children || []).slice(0, maxLevel)"
                    @row-click="handleRowClick"
                    :show-header="false">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            
            <!-- 子表单继续嵌套 -->
            <el-table-column type="expand">
              <template slot-scope="innerProps">
                <el-table v-if="!exceedsMaxDepth(innerProps.row.children || [])"
                          :data="(innerProps.row.children || []).slice(0, maxLevel)"
                          @row-click="handleRowClick"
                          :show-header="false">
                  <el-table-column prop="date" label="日期"></el-table-column>
                  <el-table-column prop="name" label="姓名"></el-table-column>
                </el-table>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    exceedsMaxDepth(childrenArray){
      return (this.maxLevel === 3 && childrenArray.length > 0);
    },
    handleRowClick(row){ /* ... */ }
  },
  computed:{
    tableData(){
      let result = [];
      function traverse(data,parent=[]){
        for(let i=0;i<data.length&&parent.length<=2;i++){
          const item=data[i];
          item._level=(parent||[]).length;
          result.push({...item});
          if(item.children&&item.children.length>0){
            traverse(item.children,[...parent,item]);
          }
        }
      }
      traverse(this.rawTableData); // rawTableData 是原始未处理过的多层数据源
      return result.filter(r=>r._level<3);
    }
  },
  props:['rawTableData'],
  data() {
    return {maxLevel: 3};
  }
}
</script>

上述方法通过对每一条记录附加 `_level` 来追踪其所在的层数，并最终筛选掉那些超出设定范围的数据条目[^1]。