elementplus怎么实现多级表格

想要实现的效果

总共四级 前三级是表格 第四级使用图片展示； 看了一下官网 计划使用官网的树形结构， 但是发现并不能满足最后一个是图片形式的展示

最后利用了表格的expand；
在过程中主要需要解决的问题有：vue3 递归使用组件；递归处理数据；展开全部级。

递归处理数据

首先需要处理一下数据，把他们弄成字段一致的，如果后端处理过，前端也会需要处理一下，用于前端自己新增使用的字段 ，我这边 新增了三个字段

• disableExpand： 用于我的展开表格 单行能不能展开

• id： 后端没有给id字段 用于唯一标识

• level： 判断当前数据是第几级数据

const getOverviewList = async () => {
  if (!searchParams.value.train_type_id) {
    return;
  }
  const resp = await Pepper.get('/api/match/detail', {
    params: searchParams.value
  });
  overviewTotal.value = resp.data.list.length;
  overviewList.value = handleOverviewList(resp.data.list);
};
const handleOverviewList = (data: OverviewListModel[], listLevel = 1) => {
  const result: OverviewListModel[] = data.map((item, index) => {
    return {
      ...item,
      // 新增字段
      disableExpand: !!item.sub_number,
      level: listLevel,
      id: listLevel + '-' + index,
      // 处理list
      list: item.list && item.list.length ? handleOverviewList(item.list as OverviewListModel[], listLevel + 1) : []
    };
  });
  return result;
};

递归调用组件

因为字段一致所以我使用的是同一个组件，需要说明的是 vue3使用自己组件的时候直接使用即可
在外层：传入所有的data

在OverviewTable组件中 直接使用OverviewTable就可；下面这个包括展开所有级的代码
展开所有级 利用@expand=“handleExpand” 修改expandKeys即可

      
      ....
      
        
          {{ row.sub_number }}