本文主要介紹Vue Element的樹狀列表。樹狀列表是一種常見的數(shù)據(jù)結(jié)構(gòu)，通常用于展示層級關(guān)系。Vue Element提供了開箱即用的樹狀列表組件，使得開發(fā)者可以輕松地實現(xiàn)這種常見的數(shù)據(jù)結(jié)構(gòu)。

首先，我們需要安裝Vue Element。可以通過npm包管理器進(jìn)行安裝：

npm i element-ui -S

然后，在Vue項目中引入Vue Element：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

現(xiàn)在，我們可以開始使用Vue Element的樹狀列表組件了。首先，需要準(zhǔn)備一份數(shù)據(jù)：

data() {
return {
data: [{
label: '一級 1',
children: [{
label: '二級 1-1',
children: [{
label: '三級 1-1-1'
}]
}]
}, {
label: '一級 2',
children: [{
label: '二級 2-1',
children: [{
label: '三級 2-1-1'
}]
}, {
label: '二級 2-2',
children: [{
label: '三級 2-2-1'
}]
}]
}]
}
}

這份數(shù)據(jù)包含了三級層級關(guān)系的節(jié)點。接下來，我們可以在Vue的模板中使用Vue Element的樹狀列表組件：

在這段代碼中，我們使用了<el-tree>標(biāo)簽來包含樹狀列表組件，其中:data屬性綁定了我們準(zhǔn)備好的數(shù)據(jù)。此外，:expand-on-click-node屬性設(shè)置為false，表示節(jié)點不會在被點擊時自動展開。:default-expanded-keys屬性綁定了一個初始展開的節(jié)點id。

現(xiàn)在，我們已經(jīng)完成了基本的樹狀列表的展示。Vue Element的樹狀列表組件還提供了許多其他的功能和配置選項，例如顯示圖標(biāo)、選中節(jié)點、自定義節(jié)點內(nèi)容等等。詳細(xì)的文檔可以在官方網(wǎng)站上查看。