新手使用VUE做菜单/组织结构树

        本人之前一直做得java后端，了解一点前端没有正式自己做过项目，都是改改别人东西，近期觉得得前后通吃，就随手搭建了一个前后端分离的项目，前端用的vue，这里分享下常用到的菜单树，前端新手不足的地方希望能有大佬指出，感谢！

        本来看了下论坛什么的，人家用的element-ui的el-tree，我试用了下，对修改样式，包括里面的动态添加节点，鼠标事件等等想做性化修改时总有问题，就自己写了一个，为了方便其他人拷贝参照，这里分享整片代码。

        

<template>
  <div id="menumanage" >
    <div class="menulist" @contextmenu.prevent="test">
      <div :class="rootmenu.checkroute ? 'menusselected': 'menus'" @click="loademenu(rootmenu,olddata)">
        <span class="spanclass">{{rootmenu.name}}</span><img :class="rootmenu.route ? 'imgclassdown': 'imgclass'" style="float: right;height: 21px;width: 21px;" src="../../../assets/next.png"/>
      </div>
      <div v-if="firstshow"  v-for="item in menus" >
        <div :class="item.checkroute ? 'menusselected': 'menus'" @click="getmenus(item,olddata)">
          <span class="spanclass firstspan">{{item.menuName}}</span><img :class="item.route ? 'imgclassdown': 'imgclass'" style="float: right;height: 21px;width: 21px;" src="../../../assets/next.png"/>
        </div>
        <div v-if="item.childshow"  v-for="item_s in item.children" >
         <div :class="item_s.checkroute ? 'menusselected': 'menus'" @click="getmenus(item_s,olddata)">
            <span class="spanclass firstspan secondspan">{{item_s.menuName}}</span><img :class="item_s.route ? 'imgclassdown': 'imgclass'" style="float: right;height: 21px;width: 21px;" src="../../../assets/next.png"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>export default {
  data () {
    return {
      rootmenu: {
        id: 'sfawgg',
        name: '根菜单',
        route: false,
        checkroute: false
      },
      firstshow: false,
      olddata: {
        id: 'sfawgg',
        name: '根菜单',
        route: false,
        checkroute: false
      },
      menus: []
    }
  },
  mounted () {
  },
  methods: {
    loademenu (datanow, olddata) {
      // 重置上一个节点
      // this.olddata.route = !this.olddata.route
      this.olddata.checkroute = false
      // 这里循环关闭下子节点 逻辑不是很好 欢迎指正
      this.menus.forEach(element => {
        element.route = false
        // console.log(this.orglist)
      })
      // 复制历史节点
      this.olddata = datanow
      datanow.route = !datanow.route
      datanow.checkroute = !datanow.checkroute
      this.firstshow = !this.firstshow
      // 加载所有一级菜单
      // 后台接口获取数据
      if (this.firstshow === true) {
        this.$http.get(config.server + '/menu/getallmenu', {
          headers: {
            'authorization': sessionStorage.getItem('token')
          },
          params: {
            level: '1',
            id: '-1'
          }
        })
          .then((response) => {
            if (response.data.status === 10002) {
              this.$message('未加载到数据')
            } else if (response.data.status === 10001) {
              // 清空历史记录
              this.menus = []
              response.data.data.forEach(element => {
                const newChild = {
                  id: element.id,
                  menuId: element.menuId,
                  menuName: element.menuName,
                  objectId: element.menuUrl,
                  level: element.level,
                  delFalg: element.delFalg,
                  pMenuId: element.pMenuId,
                  checkroute: false,
                  route: false,
                  childshow: false,
                  children: []
                }
                this.menus.push(newChild)
              })
            } else {
              this.$message('发生内部错误，请重试')
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    },
    getmenus (thismenu, olddata) {
      olddata.checkroute = false
      this.olddata = thismenu
      thismenu.route = !thismenu.route
      thismenu.checkroute = true
      // 获取下级菜单
      thismenu.childshow = !thismenu.childshow
      if ( thismenu.childshow === true) {
        this.$http.get(config.server + '/menu/getallmenu', {
          headers: {
            'authorization': sessionStorage.getItem('token')
          },
          params: {
            level: '2',
            id: thismenu.id
          }
        })
          .then((response) => {
            if (response.data.status === 10002) {
              this.$message('未加载到数据')
            } else if (response.data.status === 10001) {
              // 清空历史记录
              thismenu.children = []
              response.data.data.forEach(element => {
                const newChild = {
                  id: element.id,
                  menuId: element.menuId,
                  menuName: element.menuName,
                  objectId: element.menuUrl,
                  level: element.level,
                  delFalg: element.delFalg,
                  pMenuId: element.pMenuId,
                  checkroute: false,
                  route: false,
                  childshow: false
                }
                thismenu.children.push(newChild)
              })
            } else {
              this.$message('发生内部错误，请重试')
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    },
    test () {
      alert(111)
    }
  }
}
</script>
<style>
  #menumanage{
    border: 1px red solid;
    padding: 20px;
  }
  .menus{
    padding: 2px;
    color: #000000a8;
  }
  .menus:focus{
    /*padding: 2px;*/
    color: #b9b1b13d;
  }
  .menus:hover{
    background: #b9b1b13d;
  }
  .menusselected{
    padding: 2px;
    background: #b9b1b13d;
    color: #000000a8;
  }
  .menulist{
    /*border: 1px blue solid;*/
    height: 400px;
    width: 200px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
  }
  .spanclass{
    /*position: absolute;*/
    top: 50%;
    /*margin-top: -10.5px;*/
  }
  .firstspan{
    margin-left: 20px;
  }
  .secondspan{
    margin-left: 40px;
  }
  .imgclass{
    transition: all 0.2s;
  }
  .imgclassdown{
    transform:rotate(90deg);
    transition: all 0.2s;
  }
</style>