tree菜单

<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>