实现三级分类列表展示，查看下一级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>category管理</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 150px;
height: 70px;
line-height: 150px;
text-align: center;
}
.avatar {
width: 150px;
height: 70px;
display: block;
}
</style>
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>管理<small>category管理</small></h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>管理</el-breadcrumb-item>
<el-breadcrumb-item>category管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="app-container">
<div class="box">
<div class="filter-container">
<el-button type="primary" class="butT" @click="formVisible=true;pojo={parentId: searchMap.parentId }">新增</el-button>
<el-button type="primary" class="butT" @click="returnQuery()">返回上级</el-button>
</div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="id" label="分类ID" width="80"></el-table-column>
<el-table-column prop="name" label="分类名称" width="200"></el-table-column>
<el-table-column prop="goodsNum" label="商品数量" width="80"></el-table-column>
<el-table-column label="级别" width="80">
<template slot-scope="scope">
{{parentIds.length+1}}
</template>
</el-table-column>
<el-table-column label="是否显示" width="80">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isShow"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0">
</el-switch>
</template>
</el-table-column>
<el-table-column label="是否导航" width="80">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isMenu"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="seq" label="排序" width="80"></el-table-column>
<el-table-column label="模板" width="200">
<template slot-scope="scope">
<el-select v-model="scope.row.templateId" disabled placeholder="请选择">
<el-option
v-for="item in templateList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
label="设置" >
<template slot-scope="scope">
<!--此处小于2 是为了 三级列表不显示查询下级 连接-->
<el-button v-if="parentIds.length<2" @click="queryByParentId(scope.row.id)" size="mini" type="primary" size="small">查看下级</el-button>
</template>
</el-table-column>
<el-table-column
label="操作" >
<template slot-scope="scope">
<el-button @click="edit(scope.row.id)" size="mini" type="primary" size="small">修改</el-button>
<el-button @click="dele(scope.row.id)" size="mini" type="danger" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--新增修改弹出窗口-->
<div class="add-form">
<!--弹出窗口-->
<el-dialog title="编辑" :visible.sync="formVisible" >
<el-form label-width="80px">
<el-form-item label="分类名称"><el-input v-model="pojo.name"></el-input></el-form-item>
<el-form-item label="是否显示">
<el-switch
v-model="pojo.isShow"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="是否导航">
<el-switch
v-model="pojo.isMenu"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="排序"><el-input v-model="pojo.seq"></el-input></el-form-item>
<el-form-item label="模板ID">
<el-select v-model="pojo.templateId" filterable placeholder="请选择">
<el-option
v-for="item in templateList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="save()">保存</el-button>
<el-button @click="formVisible = false" >关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</div>
</div>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script>
new Vue({
el: '#app',
//模型数据
data(){
return {
tableData: [],
searchMap: {parentId:0},
pojo: {},
formVisible: false,
imageUrl: '',
parentIds:[],
templateList:[]
}
},
created(){
this.fetchData();
//加载模板列表
axios.get(`/template/findAll.do`).then( response=>{
this.templateList=response.data
})
},
methods:{
fetchData (){
axios.post(`/category/findList.do`,this.searchMap).then(response => {
this.tableData = response.data
});
},
//新增
save (){
// this.pojo.image= this.imageUrl; //如页面有图片上传功能放开注释
axios.post(`/category/${this.pojo.id==null?'add':'update'}.do`,this.pojo).then(response => {
this.fetchData (); //刷新列表
this.formVisible = false ;//关闭窗口
});
},
//修改
edit (id){
this.formVisible = true // 打开窗口
// 调用查询
axios.get(`/category/findById.do?id=${id}`).then(response => {
this.pojo = response.data;
// this.imageUrl=this.pojo.image //显示图片 如页面有图片上传功能放开注释
})
},
//删除
dele (id){
this.$confirm('确定要删除此记录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then( () => {
axios.get(`/category/delete.do?id=${id}`).then(response => {
if(response.data.code==0){
this.fetchData (); //刷新列表
}else{
this.$alert(response.data.message)
}
})
})
},
//查看下一级
queryByParentId(parentId){
//做记号
this.parentIds.push(this.searchMap.parentId);
this.searchMap.parentId = parentId;
this.fetchData()
},
returnQuery(){
if(this.parentIds.length>0){
this.searchMap.parentId =this.parentIds[ this.parentIds.length-1 ]
//删除数组最后一个元素
this.parentIds.splice(this.parentIds.length - 1, 1);
//重新加载查询
this.fetchData()
}
}
}
})
</script>
</html>
具体解释
（ 1 ） 查询一级分类列表。 修改searchMap的属性 ， 删除查询表单
searchMap: {parentId: 0}
这样打开category.html就看到一级分类的列表了。
（ 2） 查询下级列表： 新增方法，把点击的列表id ，加入查询条件
queryByParentId(parentId) {
this. searchMap. parentId=parentId;
this. fetchData() ; //加载数据
},
表格的模板列新增"查询下级"按钮, 点击一次会调用 queryByParentId，传入所点击节点的id, 然后根据父节点查询出下级分类列表
<el-button v-if="parentIds.length<2"
@click="queryByParentId(scope.row.id)"
size="mini" type="primary" size="small"> 查看下级
</el-button>
（ 3） 返回上级列表
在模型数据区， 新增属性 ， 用于记录点击的上级id
parentIds: [ ]
修改方法queryByParentId， 添加代码。 将每次点击的节点id 存入 parentIds: [ ] 中。
this.parentIds.push(this.searchMap.parentId)
新增方法
returnQuery(){
//如果数组长度大于0，代表可以返回上级
if(this.parentIds.length>0){
//获取最后一个元素数据，赋值给查询条件：searchMap.parentId
this.searchMap.parentId =this.parentIds[ this.parentIds.length-1 ]
//同时截取掉 数组最后一个元素。
this.parentIds.splice(this.parentIds.length - 1, 1);
this.fetchData()//重新加载数据
}
}
新增按钮
<el‐button type="primary" @click="returnQuery() ">返回上级</el‐button>
2356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
