vue 树形插件_vue2的树形插件

最新推荐文章于 2025-09-04 11:55:40 发布

cuk5239

最新推荐文章于 2025-09-04 11:55:40 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue js jquery object c# ViewUI

原文链接：https://vuejsexamples.com/a-tree-plugin-for-vue2/

本文介绍了vue2的树形插件vue-jstree，包括NPM安装、ES6导入、设置及用法。还详细讲解了API、节点模型的方法和触发的事件，如@item-click和@item-toggle。此外，还提到了数据项的可选属性。

vue 树形插件

vue-jstree (vue-jstree)

A tree plugin for vue2.

vue2的树形插件。

View demo 查看演示 Download Source 下载源

NPM (NPM)

npm install vue-jstree

ES6 (ES6)

import VJstree from 'vue-jstree'
    
    new Vue({
      components: {
        VJstree
      }
    })

建立 (Setup)

npm install
    npm run dev

用法 (Usage)

<v-jstree :data="data" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></v-jstree>
    
    new Vue({
      data: {
        data: [
          {
            "text": "Same but with checkboxes",
            "children": [
              {
                "text": "initially selected",
                "selected": true
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-danger"
              },
              {
                "text": "initially open",
                "icon": "fa fa-folder icon-state-default",
                "opened": true,
                "children": [
                  {
                    "text": "Another node"
                  }
                ]
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-warning"
              },
              {
                "text": "disabled node",
                "icon": "fa fa-check icon-state-success",
                "disabled": true
              }
            ]
          },
          {
            "text": "Same but with checkboxes",
            "opened": true,
            "children": [
              {
                "text": "initially selected",
                "selected": true
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-danger"
              },
              {
                "text": "initially open",
                "icon": "fa fa-folder icon-state-default",
                "opened": true,
                "children": [
                  {
                    "text": "Another node"
                  }
                ]
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-warning"
              },
              {
                "text": "disabled node",
                "icon": "fa fa-check icon-state-success",
                "disabled": true
              }
            ]
          },
          {
            "text": "And wholerow selection"
          }
        ]
      },
      methods: {
        itemClick (node) {
          console.log(node.model.text + ' clicked !')
        }
      }
    })

API (API)

Props	Type	Default
data	Array
size	String
showCheckbox	Boolean	false
wholeRow	Boolean	false
noDots	Boolean	false
multiple	Boolean	false
allowBatch	Boolean	false
textFieldName	Boolean	'text'
valueFieldName	Boolean	'value'
async	Function
loadingText	String	'Loading'
draggable	Boolean	false
klass	String

道具	类型	默认
数据	数组
尺寸	串
showCheckbox	布尔型	假
整行	布尔型	假
无点	布尔型	假
多	布尔型	假
allowBatch	布尔型	假
textFieldName	布尔型	'文本'
valueFieldName	布尔型	'值'
异步的	功能
loadingText	串	“加载中”
可拖动的	布尔型	假
克拉斯	串

node.model中的方法 (Methods in node.model)

Method	Params
addChild	(object) newDataItem
addAfter	(object) newDataItem, (object) selectedNode
addBefore	(object) newDataItem, (object) selectedNode
openChildren
closeChildren

方法	参数
addChild	(对象)newDataItem
addAfter	(对象)newDataItem，(对象)selectedNode
addBefore	(对象)newDataItem，(对象)selectedNode
openChildren
closeChildren

事件 (Event)

@item-click

@ item-click

@item-toggle

@ item-toggle

数据项可选属性 (Data Item Optional Properties)

Name	Type	Default
icon	String
opened	Boolean	false
selected	Boolean	false
disabled	Boolean	false

名称	类型	默认
图标	串
开了	布尔型	假
已选	布尔型	假
残障人士	布尔型	假

翻译自: https://vuejsexamples.com/a-tree-plugin-for-vue2/

vue 树形插件