一個vue樹形插件vue-simple-tree

時間 2019-11-09

標籤一個 vue 插件 simple tree 简体版

原文原文鏈接

在實際項目中常常用到tree視圖，發現了幾個vue的tree插件，但都不是太適合本身項目，花了一些心思寫了一個插件，簡單靈活，適合大部分項目。css

Github 望不吝Star！html

介紹

一個簡單靈活的vue.js樹形組件，可做爲插件使用，也可直接做爲component使用vue

使用時只需傳入一個樹形數據綁定。git

組件還提供了增刪改查事件，你能夠很方便的在組件上監聽。github

不止這些，npm

可定製的增刪改查事件
複選框顯示可選
初始化展開層級
初始化勾選
可選的按鈕圖標
父節點半選狀態支持
顯示字段自定義
...

演示

A Demojson

安裝

# install
npm install vue-simple-tree --sve-dev

數據格式

treeData數組

id必要屬性,Numberbash

name必要屬性,String,可自定義,默認name,如options.itemName:'display_name'app

children非必要,Array

treeData示例

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

使用示例

有兩種使用方法:

局部註冊component(推薦)

App.vue

<template>
  <div id="app">
      <vue-tree v-model="checkedIds" :tree-data="treeData" :options="options"></vue-tree>
  </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>

全局註冊，經過插件形式註冊全局component

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"></vue-tree>
  </div>
</template>

<script>
import Tree from 'tree.json';
export default {
    name: 'app',
    data () {
        return {
            checkedIds: [],
            treeData: Tree.data,
            options: {}
        }
    }
}
</script>

設置選項

如下是默認設置.

你能夠在options裏覆蓋默認設置，或僅設置若干項options: {someOption: true}

你也能夠綁定一個空的對象:options="{}"或直接忽略options

options: {
    // String,節點顯示字段
    itemName: 'name',
    
    // Boolean,是否顯示添加子節點按鈕
    addItem: true,
    
    // Boolean,是否顯示選擇框
    checkbox: true,
    
    // Array,初始化時選中id (v2.1之後不推薦使用，v3.0將廢棄),替代方法見'#使用示例'章節
    checkedIds: [], 
    
    // Boolean,選中時是否展開節點
    checkedOpen: true,
    
    // Boolean,目錄是否加粗顯示
    folderBold: true,
    
    // String,展開按鈕(默認依賴font-awesome)
    openClass: 'fa fa-plus-square text-info',
    
    // String,收縮按鈕(默認依賴font-awesome)
    closeClass: 'fa fa-minus-square text-danger',
    
    // String,添加節點按鈕(默認依賴font-awesome)
    addClass: 'fa fa-plus text-danger',
    
    // Boolean,是否顯示編輯按鈕
    showEdit: true,
    
    // Boolean,是否顯示刪除按鈕
    showDelete: true,
    
    // String,編輯按鈕(默認依賴font-awesome)
    editClass: 'fa fa-edit',
    
    // String,刪除按鈕(默認依賴font-awesome)
    deleteClass: 'fa fa-trash-o'
    
    // (v2.1新增) Boolean,獲取複選項目是否包含目錄,默認`true`,若是隻獲取葉子節點設置爲`false`
    idsWithParent: true
    
    // (v2.1新增) Number,初始化時展開層級,根節點爲0,默認0
    depthOpen: 0
}

注意：默認設置使用了font-awesome的圖標，
若是你繼續使用默認設置，請引入這個css庫

如何獲取複選數據?

自v2.1起,再也不從options.checkedIds獲取複選數據,
而是使用v-model="checkedIds"獲取複選id.

默認狀況下獲取的ids是包含全部上級目錄的,若是你想獲取只包含葉子節點的ids,設置options.idsWithParent爲false

事件

item-click、add-a-child、 item-edit 、item-delete 分別爲點擊節點、添加子節點、編輯節點、刪除節點事件。

這些事件綁定了操做id到監聽器

監聽器

若是須要，你能夠選擇綁定這些事件的其中一個或多個。

<vue-tree 
    v-model="ids"
    :tree-data="treeData"
    :options="options"
    @add-a-child="addAChild"
    @item-click="itemClick"
    @item-edit="itemEdit"
    @item-delete="itemDelete">
</vue-tree>

爲綁定的事件定義監聽方法，這些方法都接收一個當前操做id做爲參數

methods: {
    addAChild(id) {
        console.log('點擊了添加子節點按鈕，父節點ID[' + id + ']')
    },
    itemClick(id) {
        console.log('點擊了節點，節點ID[' + id + ']')
    },
    itemEdit(id) {
        console.log('點擊了編輯按鈕，節點ID[' + id + ']')
        },
    itemDelete(id) {
        console.log('點擊了刪除按鈕，節點ID[' + id + ']')
    }
}