使用element-plus table表格中的树形数据与懒加载，解决VUE3中不能使用vue-table-with-tree-grid（黑马电商管理系统项目）

在学习黑马的电商后台管理系统项目中，由于我创建的是Vue3的项目，因此在编写商品分类页面时不能使用老师教的vue-table-with-tree-grid组件。

上网搜了一下没有搜到vue3可以使用的类似组件，最后用element-plus table表格中的树形数据与懒加载解决了问题。

缺点是序号列序号不是直接按顺序显示的，我打算有时间后将序号列修改为“1,1.1,1.1.1,1.1.2”这种形式，等修改完成后我在分享出来，目前我写的是type="index"。

主要代码：

<el-table
  :data="cateList"
  style="width: 100%; margin-bottom: 20px"
  row-key="cat_id"
  :tree-props="{ children: 'children', hasChildren: 'haschildren' }"
  border
>
  <el-table-column type="index" label="#"></el-table-column>
  <el-table-column
    prop="cat_name"
    label="分类名称"
    sortable
  ></el-table-column>
  <el-table-column prop="cat_deleted" label="是否有效" sortable>
    <!-- 作用域插槽 -->
    <template v-slot="scope">
      <!-- 添加判断，根据数值显示标签 -->
      <el-tag v-if="scope.row.cat_deleted === false" type="success" round
        ><el-icon><SuccessFilled /></el-icon
      ></el-tag>
      <el-tag v-else type="danger" round
        ><el-icon><CircleCloseFilled /></el-icon
      ></el-tag>
    </template>
  </el-table-column>
 <el-table-column prop="cat_level" label="排序">
   <!-- 作用域插槽 -->
   <template v-slot="scope">
     <!-- 添加判断，根据level显示标签 -->
     <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
     <el-tag type="success" v-else-if="scope.row.cat_level === 1"
       >二级</el-tag
     >
     <el-tag type="warning" v-else>三级</el-tag>
   </template>
 </el-table-column>
<el-table-column label="操作" sortable>
   <!-- 作用域插槽 -->
   <template v-slot="scope">
     <el-button
       type="primary"
       @click="showCatesEditDialog(scope.row.cat_id)"
       ><el-icon><Edit /></el-icon>编辑</el-button
     >
     <el-button type="danger" @click="removeCatesById(scope.row.cat_id)"
       ><el-icon><Delete /></el-icon>删除</el-button
     >
   </template>
 </el-table>

其余的和老师视频所教的基本类似，等我有时间修改了序号问题再来更新。