1、效果分析

• 效果图示1-1：

2、组件

根据效果图所示，需要用到el-card,el-breadcrumb,vue-table-with-tree-grid,el-pagination组件。组件详细使用参考本人写的相关博文或者自行搜索查阅相关文档。

3、页面实现

• 源代码3-1：

    <!--  -->
    <template>
      <div>
    	<el-breadcrumb separator-class="el-icon-arrow-right">
    	  <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>
    		  <el-button type="primary">添加分类</el-button>
    		</el-col>
    	  </el-row>
    	  <tree-table
    		class="tb-cate"
    		index-text="#"
    		show-index
    		stripe
    		border
    		:data="cateList"
    		:columns="columns"
    		:expand-type="false"
    		:selection-type="false"
    	  >
    		<template slot="isok" slot-scope="scope">
    		  <i class="el-icon-success" v-if="scope.row.effective" style="color: lightGreen"></i>
    		  <i class="el-icon-error" v-else style="color: red"></i>
    		</template>
    		<template slot="level" scope="scope">
    		   <el-tag type="primary" effect="plain" size="mini" v-if="scope.row.level === 1">一级</el-tag>
    		   <el-tag type="success" effect="plain" size="mini" v-else-if="scope.row.level === 2">二级</el-tag>
    		   <el-tag type="warning" effect="plain" size="mini" v-else>三级</el-tag>
    		</template>
    		<template slot="opt" scope="scope">
    			<el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
    			<el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
    		</template>
    	  </tree-table>
    	  <el-pagination
    	  @size-change="handleSizeChange"
    	  @current-change="handleCurrentChange"
    	  :current-page.sync="query.currentPage"
    	  :page-sizes="[5, 10, 20, 50, 100]"
    	  :page-size="query.pageSize"
    	  layout="total, sizes, prev, pager, next, jumper"
    	  hide-on-single-page
    	  :total="total">
    	</el-pagination>
    	</el-card>
      </div>
    </template>
  
    <script>
    export default {
      data() {
    	return {
    	  cateList: [],
    	  query: {
    		currentPage: 1,
    		pageSize: 5,
    	  },
    	  total: 0,
    	  columns: [
    		{ label: "分类名称", prop: "name" },
    		{
    		  label: "是否有效",
    		  prop: "effective",
    		  type: "template",
    		  template: "isok",
    		},
    		{
    		  label: "分类等级",
    		  prop: "level",
    		  type: "template",
    		  template: "level"
    		},
    		{
    			label: '操作',
    			type: 'template',
    			template: 'opt'
    		}
    	  ],
    	  props: {
    		expandType: false,
    		selectionType: false,
    	  },
    	};
      },
  
      created() {
    	this.getCateList();
      },
  
      methods: {
    	getCateList() {
    	  this.$http.get("/category/page", { params: this.query }).then((resp) => {
    		this.total = resp.total;
    		this.cateList = resp.items;
    		console.log(resp);
    	  });
    	},
    	handleSizeChange(val) {
    		this.query.pageSize = val
    		this.getCateList()
    	},
    	handleCurrentChange(val) {
    		this.query.currentPage = val
    		this.getCateList()
    	}
      },
    };
    </script>
  
    <style lang='scss' scoped>
    .tb-cate {
      margin: 15px 0;
    }
    </style>
  

提示 ：当前只是完成了页面布局和部分功能实现，其他添加，修改和删除未实现，详见下一篇博文。

后记 ：

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/ly-bms    // 前端后台管理系统
后端JAVA源代码地址:https://gitee.com/gaogzhen/ly-backend        // 后端项目