vue的element ui使用el-table组件实现懒加载树、默认自动展开层级（一层，二层）、并且解决新增、删除、修改之后树节点不刷新问题

在Vue中使用Element UI的el-table组件实现懒加载树结构，并默认自动展开一层和二层的节点，可以通过监听el-table的expand事件来控制展开的层级。以下是一个简化的实现示例：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    @expand="handleExpand"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 初始数据结构中包含是否有子节点的标识
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          hasChildren: true,
          children: [] // 子节点暂时为空
        }
      ],
      expandedRows: new Set() // 用于记录已展开的行
    };
  },
  methods: {
    handleExpand(row, expandedRows) {
      if (expandedRows.length > 0 && !this.expandedRows.has(row)) {
        this.fetchChildren(row);
        this.expandedRows.add(row);
      }
    },
    fetchChildren(parent) {
      // 这里模拟异步获取子节点数据
      setTimeout(() => {
        // 假设获取到的子节点数据
        const childrenData = [
          {
            id: 11,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            hasChildren: false,
            children: []
          }
        ];
        // 将子节点数据添加到父节点的children属性中
        parent.children = childrenData;
      }, 1000);
    }
  }
};
</script>

在这个示例中，tableData 是表格的数据源，每个对象都可能包含 children 属性，表示它是一个可展开的节点。hasChildren 属性用于指示该节点是否有子节点，以便表格组件知道如何渲染展开按钮。handleExpand 方法监听 el-table 的 expand 事件，当用户展开一个节点时，会调用 fetchChildren 方法来异步获取子节点数据。

注意：这个示例中并没有实现真正的异步从服务器获取子节点数据的逻辑，而是使用了 setTimeout 来模拟。在实际应用中，你需要替换 fetchChildren 方法中的逻辑，以便从服务器获取数据。此外，这个示例只处理了一层和二层的自动展开，如果需要更多层级的自动展开，可以递归地实现或者在数据加载时预先处理好所有层级的数据。