使用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>
其余的和老师视频所教的基本类似,等我有时间修改了序号问题再来更新。
版权声明:本文为ajin711原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。