由于看黑马，视频，那个vue-table-with-tree-grid在vue3 不能用，所以用这个替换下
vxe-table官网 /#/table/start/install 查看 gitee /xuliangzhan_admin/vxe-table 查github /mirrors/xuliangzhan/vxe-table?utm_source=csdn_github_accelerator
<template><div><!--面包屑导航区域--><el-breadcrumb><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><el-breadcrumb-item>商品管理</el-breadcrumb-item><el-breadcrumb-item>商品分类</el-breadcrumb-item></el-breadcrumb><!--卡片视图区域--><el-card><el-row><el-col :span="2"><el-button type="primary" style="margin-bottom: 6px ">添加分类</el-button></el-col></el-row><vxe-tableresizableborderref="xTree":tree-config="{children: 'children'}":edit-config="{trigger: 'click', mode: 'row'}":checkbox-config="{labelField: 'id'}":data="catelist"><!--borderloadingrow-id="id":data="catelist":tree-config="{ children: 'children', expandAll: true }">--><vxe-table-columntype="seq"width="180"title="序号"tree-node></vxe-table-column><vxe-table-column field="cat_name" title="分类名称"></vxe-table-column><vxe-table-column field="cat_deleted" title="是否有效"><template v-slot="scope"><el-icon v-if="scope.row.cat_deleted===true" style="color: lightgreen"><CircleCheck/></el-icon><el-icon v-else style="color: lightcoral"><CircleClose/></el-icon></template></vxe-table-column><vxe-table-column field="cat_level" title="排序"><template v-slot="scope"><el-tag v-if="scope.row.cat_level===0">一级</el-tag><el-tag v-else-if="scope.row.cat_level===1" type="success">二级</el-tag><el-tag v-else type="warning">三级</el-tag></template></vxe-table-column><vxe-table-column title="操作"><template v-slot="scope"><el-button type="primary" size="small" :icon="Edit">编辑</el-button><el-button type="danger" size="small" :icon="Delete">删除</el-button></template></vxe-table-column></vxe-table><vxe-pageralign="center"size="mini"backgroundv-model:page-size="queryInfo.pageSize"v-model:current-page="queryInfo.pagenum":total="total":layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" @page-change="handlePageChange" ></vxe-pager></el-card></div></template><script>import httpClient from "@/network/HttpClient";import {Search, Edit, Delete, Setting} from "@element-plus/icons";import {reactive} from "vue";export default {name: "categories",data() {return {Search: Search,Edit: Edit,Delete: Delete,defaultProps: {children: 'children',label: 'cat_name',},//查询条件queryInfo:reactive( {type:3,pagenum:1,pagesize:10}),//商品分类列表，默认为空catelist: [],/* 总数数据条数*/total: 0,columns: []}},created() {this.getCateList();},methods: {//处理分页handlePageChange({ currentPage, pageSize }) {this.queryInfo.pagenum = currentPage;this.queryInfo.pagesize = pageSize;this.getCateList()//调用列表},//获取商品分类列表getCateList() {httpClient.getTwo("categories/", this.queryInfo).then(res => {if (res.meta.status != 200) {return this.$message.error("获取失败")} else {console.log(res);this.catelist = res.data.result;this.total = res.data.total;}})},}}</script><style scoped></style>
