vue加载树形图——vue-jstree

最新推荐文章于 2025-03-18 15:36:42 发布

theOtherSky

最新推荐文章于 2025-03-18 15:36:42 发布

阅读量2.8k

点赞数

分类专栏：前端技巧

本文链接：https://blog.csdn.net/qq_35181466/article/details/90023935

版权

前端技巧专栏收录该内容

42 篇文章

订阅专栏

vue-jstree的详细api https://python.ctolib.com/article/wiki/81493（带教程）

此处是个人见解：

1.安装新的依赖：npm install vue-jstree

//在需要使用的地方导入vue-jstree
import VJstree from 'vue-jstree'
    
    new Vue({
      components: {
        VJstree
      }
    })


//使用vue-jstree
<v-jstree :data="data" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></v-jstree>
//其中<v-jstree></v-jstree>里面写的值show-checkbox，multiple，allow-batch，whole-row
//原本是为布尔值为false的，写上去之后就是true了
    
    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 !')
        }
      }
    })