element-plus 表格树懒加载,后端一次性把所有数据全部返回。

s

s

el-table 组件需要开启 lazy :load="load" 两个属性，
 :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"还可以配置子节点和是否开启左侧箭头hasChildren，row-key 唯一值必须写对

 <el-table
      :data="label_dataed"
      style="width: 100%"
      v-loading="loading"
      row-key="uniquene"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="组织" prop="departmentName"> </el-table-column>
      <el-table-column label="申报周期" prop="period"> </el-table-column>
    </el-table>

功能实现思路
1，数据量过大，由于是多层级嵌套的，数据又多，数据那么大一次性渲染出节点会非常卡。所以第一步是把数据拆分。我首先把数据拿到了然后循环把第一层单独抽出来放到一个数组，全部的数据也保存一份用于后续抽取子级。抽取第一层，然后把子级设置为空。这样数据就很少了。先用来渲染出一层的节点。

GlobalCommonApi.startLevelPlanStatistics({ period: '2025-02' }).then(res => {
  tableData.value = convertTrees(
    JSON.parse(JSON.stringify(res?.data?.dataInfo))
  );
  convertTrees(res?.data?.dataInfo).forEach((item: IObject) => {
    if (item?.children?.length !== 0) {
      item.children = [];
      label_dataed.value.push({ ...item });
    } else {
      label_dataed.value.push({ ...item });
    }
  });
});

     2.因为后端没有给我返回hasChildren这个字段，所有我写了一个递归循环根据子节点是否有数据处理了一下。

const convertTrees = (tree: IObject[]) => {
  const result: IObject[] = [];
  let getItem: IObject = {};
  // 遍历 tree
  tree.forEach((item: IObject) => {
    getItem = {
      ...item,
      hasChildren: item?.children?.length !== 0 ? true : false
    };
    // 如果有子节点，递归
    if (getItem?.children?.length > 0) {
      getItem.children = convertTrees(getItem?.children);
    } else {
      result.push(getItem);
      return;
    }
    // 解构赋值
    result.push(getItem);
  });
  return result;
};

3、点击左侧箭头执行的方法load ,正常的时候就是调后端接口返回给resolve返回，但是我们后端一开始就直接全部返回，就需要我们模拟一下请求接口，必须setTimeout一下，模拟请求方法，findChildrenById的方法作用就是根据唯一标志去原数据查找子数据,newArr方法就是用来清空当前一级所有的子节点children为空

const load = async (
  row: IObject,
  treeNode: unknown,
  resolve: (date: IObject[]) => void
) => {
  let arr = await findChildrenById(tableData.value, row?.uniquene);
  setTimeout(() => {
    if (arr == undefined) {
      resolve([]);
    } else {
      resolve(newArr(arr || []));
    }
  }, 1000);
};

const findChildrenById = (tree: IObject[], uniquene: string) => {
  // 遍历 tree
  tree.forEach((item: IObject) => {
    // 如果有子节点，递归
    if (item?.uniquene !== uniquene) {
      result.value = findChildrenById(item?.children, uniquene);
    } else {
      result.value = item?.children;
    }
  });
  return result.value;
};

const newArr = (tree: IObject[]) => {
  const newArr: IObject[] = [];
  let getItem: IObject = {};
  // 遍历 tree
  tree.forEach((item: IObject) => {
    getItem = {
      ...item,
      children: []
    };
    // 解构赋值
    newArr.push(getItem);
  });
  return newArr;
};

 我在写完之后，和之前的组件合并到一起的时候，发现表头搜索列表，列表数据是有刷新的，但是已经打开子节点的数据开启了懒加载，却没有和列表搜索新数据一块更新，这时候是因为唯一标志key，和之前的key做对比，发现没有变化所有点击左侧按钮就没有重新执行load的方法，我看了一些文档，是单个数据删除更新用的new map（）的方法，但是我们是需要全部数据更新，唯一简单粗暴的方法就是给唯一标志key变成活的，思路就是，设置一个ukey，每次执行接口的时候，给他加一拼接到唯一key前边，这时候每个数据的key一直都是不一样的，就解决了这样的问题。

const getList = async () => {
  const postData = {
    pageNo: pageNo.value,
    pageRow: pageRow.value,
    ...queryData.value
  };
  exportData.value = { ...queryData.value };
  loading.value = true;
  const {
    data: { dataInfo, pageInfos }
  } = await props.queryFunc(postData).finally(() => {
    loading.value = false;
  });
  ukey.value = ukey.value + 1;
  label_dataed.value = convertTrees(dataInfo);
  tableData.value = [];
  await convertTrees(dataInfo).forEach((item: IObject) => {
    if (item?.children?.length !== 0) {
      item.children = [];
      tableData.value.push({ ...item });
    } else {
      tableData.value.push({ ...item });
    }
  });
  totalChange(pageInfos?.total || 0);
};

const convertTrees = (tree: IObject[]) => {
  const results: IObject[] = [];
  let getItem: IObject = {};
  // 遍历 tree
  tree.forEach((item: IObject) => {
    getItem = {
      ...item,
      hasChildren: item?.children?.length !== 0 ? true : false,
      [_options.value.rowKey]: `${ukey.value}+${item?.[_options.value.rowKey]}`
    };
    // 如果有子节点，递归
    if (getItem?.children?.length > 0) {
      getItem.children = convertTrees(getItem?.children);
    } else {
      results.push(getItem);
      return;
    }
    // 解构赋值
    results.push(getItem);
  });
  return results;
};