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

最新推荐文章于 2025-08-29 04:50:11 发布

原创

最新推荐文章于 2025-08-29 04:50:11 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #vue #前端框架

在Vue3电商后台管理系统项目中，由于不支持vue-table-with-tree-grid，采用element-plus的table组件结合树形数据和懒加载来替代。虽然序号列显示不理想，但已实现基本功能。计划优化序号列，将其改为层次结构展示。目前代码与教程相似，待解决序号问题后会分享改进方案。

在学习黑马的电商后台管理系统项目中，由于我创建的是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