乙個用 vue 寫的樹層級元件 vue ztree

2022-04-28 09:06:19 字數 1368 閱讀 2505

最近看了大神的關於vue-ztree的部落格,感覺很讚,於是摘抄下來,方便自己學習,機智girl,哈哈哈o(∩_∩)o

最近由於後台管理專案的需要,頁面需要製作乙個無限樹的需求,我第一感就想到了外掛程式 ztree,不過我覺得它太大了,還是自己動手豐衣足食吧。

我拿來了 ztree的樣式庫,自己動手寫的演算法,整了乙個小而美的 vue-ztree  元件,它基本上能滿足我的業務需求,我也希望造福開源社群,打算貢獻點微薄之力,就把它開源了。

概要 :

1: vue-ztree 的效果圖

2: vue-ztree 的呼叫方式

3: vue-ztree 的技術點 

1: vue-ztree 的效果圖

vue-ztree 的效果,如下圖所示:

2: vue-ztree 的呼叫方式:

元件寫法,如下圖:

vue-ztree 的引數講解:

引數型別

預設值描述

list

array

-樹的結構資料來源

func

function

-點選節點**的方法

expand

function

-點選展開/收起的方法(一般在非同步載入的時候使用, 非非同步載入傳null)

is-open

bealoon

true

是否展開樹

3. vue-ztree 的技術點

vue-ztree的技術點,主要是大量用到了遞迴演算法,以及一些巧妙的編碼技巧。

推薦了解vue 元件樹遞迴知識,位址

在寂寞的日子裡沉澱自己,在程式的日子裡找到自己,我為夢想而堅持!

vue-ztree 的引數講解:

引數型別

預設值描述

list

array

-樹的結構資料來源

func

function

-點選節點**的方法

expand

function

-點選展開/收起的方法(一般在非同步載入的時候使用, 非非同步載入傳null)

is-open

bealoon

true

是否展開樹

3. vue-ztree 的技術點

vue-ztree的技術點,主要是大量用到了遞迴演算法,以及一些巧妙的編碼技巧。

推薦了解vue 元件樹遞迴知識,位址

如何寫乙個Vue元件

寫的是以.vue結尾的單檔案元件的寫法,是基於webpack構建的專案。template 模板 js 邏輯 css 樣式 每個元件都有屬於自己的模板,js和樣式。如果將乙個頁面比喻成一間房子的話,元件就是房子裡的客廳 臥室 廚房 廁所。如果把廚房單獨拿出來的話,元件又可以是刀 油煙機.等等。就是說頁...

用原生js和vue元件寫乙個簡單的toast

樣式檔案 toast.css toast 複製 在toast.js檔案中的 import toast.css export function toast options const options console.log title var div document.createelement di...

Vue 封裝乙個自己寫的元件或方法

1.首先寫好裡面的模板及傳遞過來的引數 2.定義乙個index.js並引入剛建立的元件並export defaut vue 3.在main.js裡面引入 然後vue.use 引入的名稱 vue封裝乙個js引用 vue封裝的js裡面可以是個物件 也可以是方法 export 和 export defau...