vue实现一个懒加载的树状表格实例

首先，我们需要明确什么是懒加载。懒加载即指仅当需要用到某个组件或数据时才进行加载，而不是一次性加载所有的数据和组件。在树状表格的场景中，懒加载指的是只有当节点被展开时才会加载子节点的数据。

接下来，我们将介绍如何使用vue实现一个懒加载的树状表格实例。

1. 创建树状表格的基础组件

首先，我们需要创建一个基础的树状表格组件，包含展示数据所需要的功能，例如分页、排序、筛选等功能。这个基础组件可以参考element-ui的table组件，也可以自己手写。

1. 数据格式的定义

树状表格的数据通常是嵌套的树形结构。我们需要定义一个数据格式，用于表示一条树形数据，例如：

{
  id: 1,
  label: '节点1',
  children: [
    {
      id: 2,
      label: '子节点1'
    },
    {
      id: 3,
      label: '子节点2'
    }
  ]
}

其中，id和label是节点的基本信息，children表示子节点数组。

1. 指定表格列

在树状表格中，由于每个节点可能有不同的子节点数量，因此需要动态地生成列。我们可以在表格组件中指定表格列，例如：

columns: [
  {
    prop: 'id',
    label: 'ID'
  },
  {
    prop: 'label',
    label: '名称'
  },
  {
    type: 'expand',
    expandColumn: true,
    width: 50,
    render: (h, params) => {
      return h('div', {}, [
        params.row.loading ? // 判断是否正在加载子节点数据
          h('el-spinner', {
            attrs: {
              type: 'dots',
              size: 'small'
            },
            style: {
              display: 'inline-block',
              marginRight: '5px'
            }
          }) :
          null,
        params.row.children && params.row.children.length > 0 ? // 判断是否有子节点
          h('el-button', {
            attrs: {
              type: 'text',
              icon: params.row.expanded ? 'el-icon-arrow-down' : 'el-icon-arrow-right',
              size: 'mini'
            },
            style: {
              transition: 'transform .3s, opacity .3s',
              transform: `rotate(${params.row.expanded ? '90deg' : '0'})`,
              opacity: params.row.expanded && params.row.loading ? 0.5 : 1
            },
            on: {
              click: () => {
                params.row.expanded = !params.row.expanded;

                if (params.row.expanded && params.row.children && params.row.children.length === 0) { // 加载子节点数据
                  params.row.loading = true;
                  loadData(params.row).then((data) => {
                    params.row.children = data;
                  }).finally(() => {
                    params.row.loading = false;
                  });
                }
              }
            }
          }) :
          null
      ]);
    }
  }
]

其中，columns表示表格的列，expand表示展开列，render是当前列的渲染函数。我们在渲染函数中，通过判断节点的状态和属性来动态生成展开按钮，并在按钮被点击时加载子节点数据。

1. 加载子节点数据

在点击展开按钮时，需要加载当前节点的子节点数据。为了避免一次性加载所有的数据，我们可以通过异步加载的方式来实现懒加载。具体实现方式可以参考以下两种方法：

(1) 使用Promise

使用Promise的方式需要手动实现异步加载逻辑，并将结果返回给params.row.children。示例如下：

function loadData(node) {
  return new Promise((resolve, reject) => {
    // 加载子节点数据的逻辑
    // ...
    resolve(data);
  });
}

(2) 使用async/await

使用async/await的方式可以更直观地实现异步加载逻辑，示例如下：

async function loadData(node) {
  try {
    const data = await axios.get(`/api/getChildren?id=${node.id}`);
    return data;
  } catch (error) {
    console.error(error);
    return [];
  }
}

此外，我们还需要在节点的数据中添加expanded和loading两个属性，分别表示节点是否已展开和是否正在加载。可以在创建数据时进行赋值，也可以通过组件内的方法来修改。

1. 添加搜索功能

在树状表格中添加搜索功能非常常见。我们可以为表格组件添加一个搜索框，并在输入关键字时触发搜索操作。实现方式可以参考以下示例：

<template>
  <div>
    <el-input placeholder="请输入关键字" v-model="keyword" style="width: 200px"></el-input>
    <el-button type="primary" @click="search">搜索</el-button>
    <el-table :data="data" :columns="columns" v-loading="loading">
      <!-- ... -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      columns: [], // 列定义
      loading: false,
      keyword: ''
    };
  },
  methods: {
    search() {
      this.loading = true;
      this.loadData().finally(() => {
        this.loading = false;
      });
    },
    async loadData() {
      try {
        const data = await axios.get('/api/getData', {
          params: {
            keyword: this.keyword
          }
        });
        // 过滤数据
        // ...
        this.data = filteredData;
      } catch (error) {
        console.error(error);
        this.data = [];
      }
    }
  }
};
</script>

在搜索时，我们需要重新加载数据并根据关键字进行过滤。可以通过发起异步请求来加载数据，在响应结果中进行过滤后更新表格数据。需要注意的是，在表格数据过滤后，如果有节点被过滤掉，那么其所有的子节点也需要被过滤掉，否则会影响搜索结果的正确性。