UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

VUE中使用树简易版

所属分类：导航-文件树

 53594  348  查看评论 (23)
分享到微信朋友圈
X
VUE中使用树简易版 ie兼容8
 查看演示  website  立即下载

介绍

一个简单灵活的vue.js树形组件，可作为插件使用，也可直接作为component使用

使用时只需传入一个树形数据绑定。

组件还提供了handle事件，你可以很方便的在组件上监听。

不止这些，

  • 高效的计算方法

  • 可定制的选择框样式

  • 复选框显示可选

  • 初始化展开层级

  • 初始化勾选

  • 可选的按钮图标

  • 父节点半选状态支持

  • 显示字段自定义

  • 事件监听

  • ...

安装

# install
npm install vue-simple-tree --save

数据规范

treeData

  • id 必要属性，类型 Number

  • label 必要属性，类型 String，可自定义，默认 label，如： options.label:'some_field'

  • children 非必要，类型 Array

treeData示例

./tree.json

{
  "data": [{
    "id": "1",
    "label": "Root",
    "children": [
      {
        "id": "2",
        "label": "Node2"
      },
      {
        "id": "3",
        "label": "Node3"
      },
      {
        "id": "4",
        "label": "Node4",
        "children": [
          {
            "id": "5",
            "label": "Node5"
          }
        ]
      }
    ]
  }]
}

使用示例

有两种使用方法:

1.局部注册

App.vue

<template>
  <div id="app">
    <vue-tree
      v-model="checkedIds"
      :tree-data="treeData"
      :options="options"
    />
  </div>
</template>
<script>
import VueTree from 'vue-simple-tree/src/components/VueTree.vue'
import Tree from './tree.json'
export default {
  name: 'app',
  components: { VueTree },
  data () {
    return {
      // 复选ids,可传入id数组作为初始选中状态,如[3,4,8]
      checkedIds: [],
      // tree数据
      treeData: Tree.data,
      // 设置项
      options: {}
    }
  }
}
</script>

2.通过插件形式全局注册

main.js

import App from './App'
import Vuetree from 'vue-simple-tree'
Vue.use(Vuetree)
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
App.vue
<template>
  <div id="app">
    <vue-tree
      v-model="checkedIds"
      :tree-data="treeData"
      :options="options"
    />
  </div>
</template>
<script>
import Tree from './tree.json';
export default {
  name: 'app',
  data () {
    return {
      checkedIds: [],
      treeData: Tree.data,
      options: {}
    }
  }
}
</script>

设置选项

以下是默认设置.

你可以在options里覆盖默认设置，或仅设置若干项options: {someOption: optionValue}

你也可以绑定一个空的对象:options="{}"或直接忽略options

设置说明

名称类型默认值说明
labelStringlabel节点名称字段
checkboxBooleantrue是否启用选择框
checkedOpenBooleantrue选中时是否展开节点
folderBoldBooleantrue目录是否加粗显示
openIconStringfa fa-plus-square展开按钮
closeIconStringfa fa-minus-square收缩按钮
checkedIconStringfa fa-check-square-o fa-fw选择框选中图标
uncheckedIconStringfa fa-square-o fa-fw选择框未选中图标
halfCheckedIconStringfa fa-minus-square-o fa-fw选择框半选中图标
idsWithParentBooleantruev-model数据是否包含目录,如果只获取叶子节点设置为false
depthOpenNumber0初始化时展开层级，根节点为0

-- 注意：默认设置使用了 font-awesome 图标， 如果你继续使用默认设置，请确保这些图标能正常使用。

-- 你也可以使用如 iconfont 的图标库，使用方法见 帮助 中的font-class引用方法章节

如何获取选择框数据?

使用 v-model="ids" 获取选择框数据（ ids 是一个只包含 id 的数组）

默认情况下 ids 包含所有祖先节点，如果你想获取只包含叶子节点（所有目录被过滤掉），设置 options.idsWithParent 为 false

事件

该组件实现了单击节点名称事件 handle，当前操作节点作为参数传递

监听器

如需要，你可以选择监听 handle 事件

<vue-tree 
  v-model="ids"
  :tree-data="treeData"
  :options="options"
  @handle="someActions"
/>

为绑定的事件定义监听方法

methods: {
  someActions (item) {
    this.message.push(`节点 ${JSON.stringify(item)} 'handle' 事件`)
  }
}

HTML结构

组件渲染的html结构为嵌套的 ul, li 结构

如下：

<ul class="vue-tree-list">
  <li class="vue-tree-item">
    <div class="item-wrapper">
      <span class="item-toggle"></span>
      <span class="item-checkbox"></span>
      <span class="item-label"></span>
    </div>
    <ul class="vue-tree-list">
      <li class="vue-tree-item">
        <div class="item-wrapper">
          <span class="item-toggle"></span>
          <span class="item-checkbox"></span>
          <span class="item-label"></span>
        </div>
      </li>
      ...
    </ul>
  </li>
  <li class="vue-tree-item">
    <div class="item-wrapper">
      <span class="item-toggle"></span>
      <span class="item-checkbox"></span>
      <span class="item-label"></span>
    </div>
  </li>
  ...
</ul>

样式

如果你想修改默认样式，一切都为你准备好了，只需要重新定义以下css类

.vue-tree-list
.vue-tree-list .vue-tree-item
.vue-tree-list .item-wrapper
.vue-tree-list .item-wrapper .item-toggle
.vue-tree-list .item-wrapper .item-checkbox
.vue-tree-list .item-wrapper .item-label

情景样式

.item-checkbox .checked
.item-checkbox .unchecked
.item-checkbox .half-checked
相关插件-文件树
查看更多

js动态树插件DynamicTree

 简单好用的 tree ，纯 js ，可编辑 Tree，并能导出为 html sql php
  文件树
 41582  328

vue树形插件

 vue的树形插件，支持增加节点，修改节点，删除节点 . 简单实用。
  文件树
 51624  336

jQuery目录树插件jtree

 jQuery目录树、文件树插件jtree，带搜索功能
  文件树
 73652  443

树控件

 非常简单的树控件，代码中注释说明很详细，方便大家修改。
  文件树
 49352  334

讨论这个项目（23）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    宋涛 0
    2022/6/22 16:11:15
    vue npm导入后，mian.js引入后，启动项目直接报错了 回复
    李???┵ 0
    2020/5/12 9:46:08

    你都打打包过了，谁能用啊

    回复
    ? 忧伤说笑 0
    2019/9/26 11:24:09
    想问下在Hbuilder 中怎么使用这个插件呢，各位大佬们知道不？
        Z晴天0
        2019/12/11 14:51:02
        可以使用cmd控制台命令打开啊
    回复
    ビ┼ドロ模? 0
    2019/8/16 14:03:08
    这个有BUG吧，设置里选了“复选是否包含目录”，能获得一个包含上级目录的ids数组。但是用这个ids去初始化树的时候由于包含最顶级的目录id导致整个树都被选中了。
        ビ┼ドロ模?1
        2019/8/16 14:23:31
        this.state > 0 && (this.addChecked(), this.itemState = this.itemState + 1)
        把这一段注释掉暂时可以修好。
        empl0
        2019/9/5 16:45:43
        this.state > 0 && (this.addChecked(), this.itemState = this.itemState + 1)是的吧这注释掉即可
        我很快乐0
        2019/11/28 16:03:29
        你好 直接npm安装以后 启动项目会报错 大家有遇到吗
        宋涛0
        2022/6/22 16:12:07
        我也是，你解决了吗
    回复
    王建坤 0
    2019/8/13 18:12:24
    我引用以后没有样式和图标，有人知道怎么办吗？
        西瓜0
        2019/8/13 18:31:52
        这个使用的是font-awesome字体图标，文件调用的是cdn地址。只要你引用地址正确是会显示的。不显示说明调用路径有问题。
    回复
    王建坤 0
    2019/8/12 10:44:30
    夕阳下的追求者 0
    2019/7/29 14:46:54
    下下来居然是打包过的，真是坑爹。 回复
    murphy666 0
    2019/5/19 21:44:40
    Kang 0
    2019/4/8 16:09:37
    看起来挺好用的，下载下来试试 回复
    不想说她 0
    2019/3/20 11:04:38
    帮助文档和模板有吗
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复