vue tree 树形结构

最新推荐文章于 2024-04-26 15:21:07 发布

DemonHunter211

最新推荐文章于 2024-04-26 15:21:07 发布

阅读量1k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/kwame211/article/details/107330945

版权

Vue 专栏收录该内容

74 篇文章 9 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js tree view example</title>
    <style>
      body {
        font-family: Menlo, Consolas, monospace;
        color: #444;
      }
      .item {
        cursor: pointer;
      }
      .bold {
        font-weight: bold;
      }
      ul {
        padding-left: 1em;
        line-height: 1.5em;
        list-style-type: dot;
      }
    </style>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../../dist/vue.min.js"></script>
  </head>
  <body>

    <!-- item template -->
    <script type="text/x-template" id="item-template">
      <li>
        <div
          :class="{bold: isFolder}"
          @click="toggle"
          @dblclick="changeType">
          {{model.name}}
          <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
        </div>
        <ul v-show="open" v-if="isFolder">
          <item
            class="item"
            v-for="model in model.children"
            :model="model">
          </item>
          <li class="add" @click="addChild">+</li>
        </ul>
      </li>
    </script>

    <!-- <p>(You can double click on an item to turn it into a folder.)</p> -->

    <!-- the demo root element -->
    <ul id="demo">
      <item
        class="item"
        :model="treeData">
      </item>
    </ul>

    <!-- demo code -->
    <script src="tree.js"></script>
  </body>
</html>

tree.js

// demo data
var data = {
  name: 'My Tree',
  children: [
    { name: 'hello' },
    { name: 'wat' },
    {
      name: 'child folder',
      children: [
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        },
        { name: 'hello' },
        { name: 'wat' },
        {
          name: 'child folder',
          children: [
            { name: 'hello' },
            { name: 'wat' }
          ]
        }
      ]
    }
  ]
}

// define the item component
Vue.component('item', {
  template: '#item-template',
  props: {
    model: Object
  },
  data: function () {
    return {
      open: false
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
        this.model.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    changeType: function () {
      if (!this.isFolder) {
        Vue.set(this.model, 'children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function () {
      this.model.children.push({
        name: 'new stuff'
      })
    }
  }
})

// boot up the demo
var demo = new Vue({
  el: '#demo',
  data: {
    treeData: data
  }
})

DemonHunter211

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue tree 树形结构

index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Vue.js tree view example</title> <style> body { font-family: Menlo, Consolas, monospace; colo..
复制链接

扫一扫