<template> <div class="ccia"> <div class="ccia_top"> <el-row> <el-col :span="12"> <div> <!-- <el-button class="bgFFC" >设置分类层级</el-button> --> <el-button class="closeAll" @click="closeall"> <i :class="allexpanded==false?'el-icon-arrow-down':'el-icon-arrow-up'"></i> {{allexpanded==false?'折叠所有':'展开所有'}} </el-button> <span> <el-button> <i class="el-icon-plus"></i> 添加新分类 </el-button> </span> </div> </el-col> </el-row> </div> <div class="contents"> <div class="tree"> <ul v-for="item in menulist" :key="item.id" @click="uli($event)"> <!-- 没有子集 --> <li v-if="!item.children"> <div class="treeItem"> <div class="lileft marginL10">{{item.catename}}</div> </div> </li> <!-- 有子集 --> <li v-if="item.children"> <div class="onechild treeItem"> <div class="lileft"> <span @click.stop="toggleChildren(item)">{{item.expanded?'- ':'+ '}}</span> {{item.catename}} </div> </div> <ul v-show="item.expanded" class="childs"> <li v-for="child in item.children" :key="child.id"> <!-- 没有子集 --> <div class="twochild treeItem marginL60" v-if="!child.children"> <div class="lileft marginL10">{{child.catename}}</div> </div> <!-- 有子集 --> <div class="twochild marginL60" v-if="child.children"> <div class="treeItem"> <div class="lileft"> <span @click="toggleChildren(child)">{{child.expanded?'- ':'+ '}}</span> {{child.catename}} </div> </div> <ul v-show="child.expanded"> <!-- 遍历第三层 --> <li class="threechild" v-for="child1 in child.children" :key="child1.id"> <div class="treeItem marginL60"> <div class="lileft marginL10">{{child1.catename}}</div> </div> </li> </ul> </div> </li> </ul> </li> </ul> </div> </div> </div> </template>
<script> export default { data() { return { allexpanded: true, //展开、折叠所有 menulist: [ { catename: "水果", expanded: false, enabled: true, children: [ { catename: "苹果", enabled: true }, { catename: "荔枝", enabled: true }, { catename: "葡萄", enabled: true }, { catename: "火龙果", expanded: false, enabled: true, children: [ { catename: "白心", enabled: true }, { catename: "红心", enabled: true } ] }, { catename: "橘子", enabled: true }, { catename: "土豆", enabled: true } ] } ], bmplist: [], usertype: 1 }; }, methods: { uli(e) { console.log(e); }, getlist() { let that = this; for (let i = 0; i < that.menulist.length; i++) { // console.log(that.menulist[i]) that.$set(that.menulist[i], "expanded", false); if (that.menulist[i].children) { // console.log('有子集') // console.log(that.menulist[i]._child.length) for (let j = 0; j < that.menulist[i].children.length; j++) { // console.log(that.menulist[i]._child[j]) that.$set(that.menulist[i].children[j], "expanded", false); if (that.menulist[i].children[j].children) { // console.log('还有子集') for ( let z = 0; z < that.menulist[i].children[j].children.length; z++ ) { that.$set( that.menulist[i].children[j].children[z], "expanded", false ); } } } } } // 还原上一次展开的情况 if (this.bmplist.length !== 0) { // console.log('展开过') for (let i = 0; i < this.menulist.length; i++) { this.menulist[i].expanded = this.bmplist[i].expanded; if (this.menulist[i].children) { for (let j = 0; j < this.menulist[i].children.length; j++) { this.menulist[i].children[j].expanded = this.bmplist[i].children[ j ].expanded; } } } } }, // 折叠所有 closeall() { this.allexpanded = !this.allexpanded; let that = this; if (this.allexpanded) { for (let i = 0; i < that.menulist.length; i++) { that.$set(that.menulist[i], "expanded", false); if (that.menulist[i].children) { // console.log('有子集') // console.log(that.menulist[i]._child.length) for (let j = 0; j < that.menulist[i].children.length; j++) { // console.log(that.menulist[i]._child[j]) that.$set(that.menulist[i].children[j], "expanded", false); if (that.menulist[i].children[j].children) { // console.log('还有子集') for ( let z = 0; z < that.menulist[i].children[j].children.length; z++ ) { that.$set( that.menulist[i].children[j].children[z], "expanded", false ); } } } } } } else { for (let i = 0; i < that.menulist.length; i++) { that.$set(that.menulist[i], "expanded", true); if (that.menulist[i].children) { // console.log('有子集') // console.log(that.menulist[i]._child.length) for (let j = 0; j < that.menulist[i].children.length; j++) { // console.log(that.menulist[i]._child[j]) that.$set(that.menulist[i].children[j], "expanded", true); if (that.menulist[i].children[j].children) { // console.log('还有子集') for ( let z = 0; z < that.menulist[i].children[j].children.length; z++ ) { that.$set( that.menulist[i].children[j].children[z], "expanded", true ); } } } } } } }, // 点击删除 delself(item) { // console.log('del',item) // this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", { // confirmButtonText: "确定", // cancelButtonText: "取消", // type: "warning" // }) // .then(() => { // this.$http // .post(this.api + "/admin/goodscate/delgoodscate", { // id: item.id // }) // .then(res => { // // console.log(res); // if (res.data.status == 1) { // this.$message.success(res.data.message); // this.getlist(); // } else { // this.$message.error(res.data.message); // } // }); // }) // .catch(() => { // this.$message({ // type: "info", // message: "已取消删除" // }); // }); }, // 点击添加 addnew(clickitem) { // console.log(clickitem, "点击项"); // this.$router.push('/addNewClass') this.$router.push({ name: "addNewClass", query: { pid: clickitem.id } }); }, // 编辑分类 showEDdi(clickitem) { console.log(clickitem); this.edidialog = !this.edidialog; this.ediForm = clickitem; console.log(this.ediForm); // this.$router.push("/ediNewClass/" + clickitem.id); }, toggleChildren: function(item) { // console.log(item,'点击项') item.expanded = !item.expanded; this.bmplist = this.menulist; // console.log("bmplist", this.bmplist); }, // 切换启用状态 toggleenabled(row) { // console.log(row); // row.enabled==0?1:0 let enabled; if (row.enabled == 1) { enabled = 0; } else if (row.enabled == 0) { enabled = 1; } // this.$http // .post(this.api + "/admin/goodscate/change_enabled", { // id: row.id, // enabled: enabled // }) // .then(res => { // if (res.data.status == 1) { // this.$message.success(res.data.message); // this.getlist(); // } else { // this.$message.error(res.data.message); // } // }); } }, created() { this.getlist(); function fnReduce() { var arr = [11, 2, 3, 4, 5]; document.write("prev" + "-----" + "next<br>"); var res = arr.reduce(function(prev, next) { //prev : 前一个操作返回的结果 默认第一个为数组中的第一个数据 //next : 下一个数 除了数组中第一个数之外的所有数 document.write(prev + "---" + next + "<br>"); return prev + "-----" + next; }); console.log(res); } fnReduce(); } }; </script>
<style lang="scss" scoped> // @import "../../../common/less/app"; .marginL60 { margin-left: 60px; } .marginL10 { margin-left: 10px; } .ccia { border-radius: 2px; // border: 1px solid red; // padding: 0px 30px; overflow: hidden; .ccia_top { padding-right: 18px; padding-left: 15px; // padding: 0 15px; // height: 69px; // background-color: pink; // padding: 9px 18px 11px 15px; box-sizing: border-box; /deep/ .el-button { background-color: #28b7a3; color: #feffff; cursor: pointer; font-size: 12px; width: 88px; height: 32px; padding: 0; } .bgFFC { background-color: #ffc000; color: #ffffff; } .closeAll { background-color: #f0f0f0; color: #555555; border: 1px solid rgba(240, 240, 240, 1); } .top_right { /deep/ .el-input--suffix { width: 170px; border-right: 1px solid #edecec; height: 32px; } /deep/ .el-input { height: 32px; } .marginR30 { margin-right: 30px; } } } } .classfoot { padding-left: 15px; background: url("../assets/images/newImgs/sizhongxingtai.png") no-repeat; } .tree { width: 860px; margin-bottom: 16px; margin-left: 15px; ul { list-style: none; } li { margin: 10px 0; color: #6a6f7d; .treeItem { // 第一级 display: flex; justify-content: space-between; min-height: 28px; line-height: 28px; font-size: 14px; border: 1px solid #e8e8e8; cursor: pointer; height: 40px; line-height: 40px; padding-right: 10px; &:hover { .lileft { font-weight: bold; color: rgba(0, 0, 0, 1); } } } } .lileft { span { padding-left: 10px; width: 25px; display: inline-block; } } .liright { // 右边显示 float: right; img { width: 36px; height: 36px; vertical-align: middle; } span { color: #a4a3a3; font-size: 12px; padding: 3px 8px; // padding: 13px; // margin-right: 10px; } .bgYes { background: #28b7a3; color: #fff; cursor: pointer; } .bgNo { background: #b3b3b3; color: #000; cursor: pointer; } .itemClass { // display: inline-block; width: 22px; height: 22px; border-radius: 2px; border: 1px solid #eff0f0; // border: 1px solid red; text-align: center; cursor: pointer; i { line-height: 22px; font-size: 13px; } } .itemClass:hover { border: 1px solid #28b7a3; i:hover { color: #28b7a3; } } } } </style>
