一個 vue 樹形外掛 vue-simple-tree

jenkincei發表於2017-10-31
Vue

在實際專案中經常用到tree檢視，發現了幾個vue的tree外掛，但都不是太適合自己專案，花了一些心思寫了一個外掛，簡單靈活，適合大部分專案。

Github 望不吝Star！

vue-simple-tree

A simple tree component for vue.js

介紹

一個簡單靈活的vue.js樹形元件，可作為外掛使用，也可直接import專案檔案

使用時只需繫結treeData和options即可。

元件還提供了增刪改事件，你可以很方便的在元件上監聽。

不止這些，

  • 繫結資料即可顯示樹形檢視
  • 增刪改事件支援
  • 可選是否顯示覆選框
  • 初始化選擇勾選
  • 可選的按鈕圖示
  • 雙擊觸發新增節點事件
  • 父節點半選狀態
  • 可自定義顯示欄位
  • 可選擇的按鈕顯示
  • ...

演示

A Demo

安裝

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

使用示例

main.js

import Vuetree from 'vue-simple-tree'
Vue.use(Vuetree)

App.vue

<template>
  <div id="app">
      <vue-tree :tree-data="treeData" :options="options"></vue-tree>
  </div>
</template>

<script>
export default {
    name: 'app',
    data () {
        return {
            treeData: {
                name: '根目錄[1]',
                id: 1,
                children: [
                    { name: '一級節點[2]', id: 2},
                    { name: '一級節點[3]', id: 3},
                    {
                        name: '二級節點[4]', id: 4,
                        children: [
                            {
                                name: '三級節點[5]', id: 5,
                                children: [
                                    { name: '四級節點[6]', id: 6},
                                    { name: '四級節點[8]', id: 8},
                                    { name: '四級節點[30]', id: 30},
                                ]
                            },
                            { name: '三級節點[9]', id: 9},
                            { name: '三級節點[10]', id: 10},
                            {
                                name: '三級節點[11]', id: 11,
                                children: [
                                    { name: '四級節點[12]', id: 12},
                                    { name: '四級節點[13]', id: 13},
                                ]
                            }
                        ]
                    }
                ]
            },
            options: {}, //設定項
        }
    },
}
</script>

注意：預設設定使用了font-awesome的圖示，以及bootstrap的情景顏色，如果你繼續使用預設設定，請引入這兩個css庫

treeData資料格式

treeData: {
    id: 1, //id必須且只能以id命名
    name: 'Root', //name必須，可重新命名如display_name，須在options.itemName設定
    children: [ //children非必需，如果有以陣列存在
        {id: 2, name: 'Node2'},
        {id: 3, name: 'Node3'}
    ]
}

設定選項

以下為預設選項。

如果你想繼續使用預設設定只需傳遞一個空的物件options: {}，

或僅包含個別設定的項options: {someOption: true}

options: {
    itemName: 'name', //節點顯示欄位
    addItem: true, //是否顯示新增子節點按鈕
    checkbox: true, //是否顯示選擇框
    checkedIds: [], //初始化時選中id
    checkedOpen: true, //選中時是否展開節點
    folderBold: true, //目錄是否加粗顯示
    openClass: 'fa fa-plus-square text-info', //展開按鈕(font-awesome)
    closeClass: 'fa fa-minus-square text-danger', //收縮按鈕(font-awesome)
    addClass: 'fa fa-plus text-danger', //新增節點按鈕(font-awesome)
    showEdit: true, //是否顯示編輯按鈕
    showDelete: true, //是否顯示刪除按鈕
    editClass: 'fa fa-edit', //編輯按鈕(font-awesome)
    deleteClass: 'fa fa-trash-o' //刪除按鈕(font-awesome)
}

事件

add-a-child、 item-edit 、item-delete 分別為新增子節點、編輯節點、刪除節點事件。

這3個事件僅僅是傳遞當前id到監聽器，並未實質操作treeData，因為增刪改資料在父元件更新後會傳遞到tree檢視。

監聽器

如果需要，你可以選擇繫結這些事件的其中一個或多個。

注意:葉子節點雙擊事件也會觸發add-a-child

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

為繫結的事件定義監聽方法，這些方法都接收一個當前操作id作為引數

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

樣式

如果你想修改預設樣式，一切都為你準備好了，只需要重新定義以下css類

.vue-tree

.vue-tree .vue-tree-item

.vue-tree .item-wrapper

.vue-tree .item-wrapper .item-toggle

.vue-tree .item-wrapper .item-btn

.vue-tree .item-wrapper .item-btn .edit-btn

.vue-tree .item-wrapper .item-btn .delete-btn

.vue-tree-list

.vue-tree-list .tree-add

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章