美文网首页
用vue开发一个树形菜单

用vue开发一个树形菜单

作者: 累累的 | 来源:发表于2020-01-09 15:32 被阅读0次

看一下效果

效果图

index.vue

创建ul 并且使用v-for循环 data是调用组件传过来的值

<template>
  <div>
    <ul v-for="(item, index) in data" :key="index">
      <tree-item :data="item"></tree-item>
    </ul>
  </div>
</template>

写一下子组件传给父组件的值的类型 data是必填的

props: {
  data: {
    type: [Object, Array],
    required: true
  }
}

treeItem.vue

创建li 并且使用v-for循环

<li>
  <span @click="toggle(data)">
    <span v-if="hasChild">{{ isOpen ? "-" : "+" }}</span>
    {{ data[text] }}
  </span>
</li>

toggle是切换显示隐藏的子级 hasChild判断是否还有子级,如果有子级则用+/-来显示打开或关闭状态

因为可能子级还会有子级,所以需要组件嵌套 所以在li里面嵌套一个ul

<ul v-show="isOpen" v-if="hasChild">
    <tree-item
      v-for="(item, index) in data[children]"
      :data="item"
      :key="index"
      :treeProps="treeProps"
    ></tree-item>
</ul>

因为使用了组件嵌套,则需要给该组件定一个名称

export default {
  name: "TreeItem",
  props: {
    data: {
      type: [Object, String],
      required: true
    }
  },
  data: {
    isOpen: false
  }
}

因为hasChild需要实时更新,所以试用了计算属性computed

computed: {
  // 判断当前级别是否还有children
  hasChild() {
    return (
      this.data[children] && this.data[children].length;
    );
  }
}

点击子菜单判断是否有children,有就展开

toggle(data) {
    if (this.hasChild) {
      this.isOpen = !this.isOpen;
      data.open = this.isOpen;
    }
}

然后简单的写一下样式

<style>
ul {
  list-style: none;
  padding-left: 20px;
}
li {
  color: #000;
}
li > span {
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
}
</style>

最后附上全部代码

index.vue

<template>
  <div>
    <ul v-for="(item, index) in data" :key="index">
      <tree-item :data="item"></tree-item>
    </ul>
  </div>
</template>

<script>
import treeItem from "./item";
export default {
  props: {
    data: {
      type: [Object, Array],
      required: true
    }
  },
  components: {
    treeItem
  }
};
</script>

item.vue

<template>
  <li>
    <span @click="toggle(data)">
      <span v-if="hasChild">{{ isOpen ? "-" : "+" }}</span>
      {{
        data[text]
      }}
    </span>
    <ul v-show="isOpen" v-if="hasChild">
      <tree-item
        v-for="(item, index) in data[children]"
        :data="item"
        :key="index"
        :treeProps="treeProps"
      ></tree-item>
    </ul>
  </li>
</template>

<script>
import { getTree, keyword } from "../../views/mapShow/PJKeyVideo/api/api";
export default {
  name: "TreeItem", //递归组件必须有name
  props: {
    data: {
      type: [Object, Array], //多个可能的类型
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    };
  },
  computed: {
    // 判断当前级别是否还有children
    hasChild() {
      return (
        this.data[children] && this.data[children].length;
      );
    }
  },
  methods: {
    // 点击子菜单也要判断是否有children,有就展开
    toggle(data) {
      if (this.hasChild) {
        this.isOpen = !this.isOpen;
      }
    },
  }
};
</script>

<style>
ul {
  list-style: none;
  padding-left: 20px;
}
li {
  color: #000;
}
li > span {
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
}
</style>

数据格式

treeData: [
  {
    children: [
      {
        children: [
          {
            text: "沈阳市"
          },
          {
            text: "大连市"
          }
        ],
        text: "辽宁省"
      }
    ],
    text: "主控制中心"
  }
 ]

相关文章

  • 用vue开发一个树形菜单

    看一下效果 index.vue 创建ul 并且使用v-for循环 data是调用组件传过来的值 写一下子组件传给父...

  • 父子组件通信

    vue之父子组件间通信实例讲解(props、emit) Vue.js 递归组件实现树形菜单(实例分享)

  • Vue 树形菜单封装

    item.vue index.vue 使用 数据递归可以看看我另一篇文章使用递归实现树状菜单

  • 组件的递归调用

    开局一个参考文章:用Vue.js递归组件构建一个可折叠的树形菜单虽然写得不是特别通俗易懂,但是看完我就写出来了!(...

  • vue树形菜单链接博客

    链接地址: https://www.cnblogs.com/caihg/p/6208105.html

  • 15.实战 7:树形控件——Tree

    实战 7:树形控件——Tree 本小节基于 Vue.js 的递归组件知识,来开发一个常见的树形控件—Tree。 T...

  • easyUI 实现tree树形菜单json的处理

    今天使用easyUI想完成一个树形菜单,后台部分的已经写好,传json给前端显示菜单。 发现easyui处理树形菜...

  • 树形菜单和自定义右键菜单

    一、树形菜单 二、自定义右键菜单

  • Java树形数据的面试题

    在平时开发、学习、面试中,经常会遇到树形结构数据的地方。比如常见的树形结构的菜单。 小编最近遇到了一个数据结构的面...

  • element菜单嵌套动态渲染

    背景:用element实现一个动态菜单,支持多层级菜单 页面布局:layout文件夹 layout.vue(菜单入...

网友评论

      本文标题:用vue开发一个树形菜单

      本文链接:https://www.haomeiwen.com/subject/efiyactx.html