眾所周知，一般界面很多情況涉及到樹列表的處理，如類型展示，如果是一層的，可以用下拉列表代替，如果是多個層級的，采用樹控件展示會更加直觀。

在Element里面也有一個el-tree的控件，如下所示，這里主要對它的各種屬性和方法進(jìn)行介紹。

簡單的代碼如下所示

<el-tree :data='data' @node-click='handleNodeClick'></el-tree>

主要在script部分里面指定它的data數(shù)據(jù)，以及單擊節(jié)點(diǎn)的事件處理，結(jié)合卡片控件的展示，我們可以把樹放在其中進(jìn)行展示

界面代碼如下所示，通過default-expand-all 可以設(shè)置全部展開，icon-class 指定節(jié)點(diǎn)圖標(biāo)（也可以默認(rèn)不指定）

<el-card class='box-card'> <div slot='header' class='clearfix'> <span>樹列表</span> <el-button type='text'>操作按鈕</el-button> </div> <div> <el-tree :data='treedata' node-key='id' default-expand-all icon- highlight-current @node-click='handleNodeClick' > <span slot-scope='{ node, data }' class='custom-tree-node'><span> <i : /> {{ node.label }}   </span> </span> </el-tree> </div></el-card>

其中界面里面，我們通過class='custom-tree-node'，來指定樹列表的展現(xiàn)內(nèi)容，可以加入圖標(biāo)等信息

而在script里面，定義了一個treedata的屬性

// 初始化樹列表 treedata: [{ label: ’一級 1’, id: ’1’, children: [{ id: ’1-1’, label: ’二級 1-1’, children: [{ label: ’三級 1-1-1’, id: ’1-1-1’ }, { label: ’三級 1-1-2’, id: ’1-1-2’ }, { label: ’三級 1-1-3’, id: ’1-1-3’ }] }]} ]

如果設(shè)置有選擇框，得到界面如下所示。

主要設(shè)置show-checkbox 和@check-change='handleCheckChange' 即可。

界面代碼如下所示

<el-tree :data='treedata' node-key='id' default-expand-all highlight-current show-checkbox :default-checked-keys='[’1-1-1’]' @node-click='handleNodeClick' @check-change='handleCheckChange'> <span slot-scope='{ node, data }' class='custom-tree-node'> <span> <i : /> {{ node.label }}    </span> </span></el-tree>

而對于樹列表，可以進(jìn)行一個過濾處理操作，如下界面所示。

在內(nèi)容區(qū)增加一個input的文本框進(jìn)行過濾處理，并綁定對應(yīng)的屬性變量

<el-input v-model='filterText' placeholder='輸入關(guān)鍵字進(jìn)行過濾' clearable prefix-icon='el-icon-search'/>

樹列表控件需要增加過濾函數(shù)綁定:filter-node-method='filterNode'，如下代碼所示。

<el-tree ref='tree':data='treedata' node-key='id' default-expand-all highlight-current show-checkbox :filter-node-method='filterNode' @check-change='handleCheckChange' @node-click='handleNodeClick'> <span slot-scope='{ node, data }' class='custom-tree-node'> <span> <i : /> {{ node.label }}    </span> </span></el-tree>

script的處理代碼如下所示，需要watch過濾的綁定值，變化就進(jìn)行過濾處理。

為了在列表結(jié)合中進(jìn)行快速的過濾，我們可以在上次介紹的列表界面里面增加一個樹列表的快速查詢處理。如下界面所示。

這里列表里面增加了一個第三方組件splitpanes，用來劃分區(qū)塊展示，而且可以拖動，非常不錯，地址是：

https://github.com/antoniandre/splitpanes

這個組件的Demo展示地址如下所示：https://antoniandre.github.io/splitpanes

效果大概如下所示

npm安裝如下所示

npm i --S splitpanes

安裝成功后，然后在vue文件的script部分里面引入即可

import { Splitpanes, Pane } from ’splitpanes’import ’splitpanes/dist/splitpanes.css’

它的使用代碼也很簡單

<splitpanes style='height: 400px'> <pane min-size='20'>1</pane> <pane> <splitpanes horizontal> <pane>2</pane> <pane>3</pane> <pane>4<pane> </splitpanes> </pane> <pane>5</pane></splitpanes>

我的列表界面使用了兩個Panel即可實現(xiàn)左側(cè)樹的展示，和右側(cè)常規(guī)列表查詢的處理。

除了常規(guī)的樹列表展示內(nèi)容外，我們也需要一個在下拉列表中展示樹內(nèi)容的界面組件。

這里又得引入一個第三方的界面組件，因此Element的Select組件不支持樹列表。

GitHub地址：https://github.com/riophae/vue-treeselect

官網(wǎng)地址：https://vue-treeselect.js.org/

NPM安裝：

npm install --save @riophae/vue-treeselect

界面代碼如下所示。

<template> <div id='app'> <treeselect v-model='value' :multiple='true' :options='options' /> </div></template>

這里的value就是選中的集合，options則是樹列表的節(jié)點(diǎn)數(shù)據(jù)。

<script> // import the component import Treeselect from ’@riophae/vue-treeselect’ // import the styles import ’@riophae/vue-treeselect/dist/vue-treeselect.css’ export default { // register the component components: { Treeselect }, data() { return {// define the default valuevalue: null,// define optionsoptions: [ { id: ’a’, label: ’a’, children: [ { id: ’aa’, label: ’aa’, }, { id: ’ab’, label: ’ab’, } ],}, { id: ’b’, label: ’b’,}, { id: ’c’, label: ’c’,} ], } }, }</script>

我的測試界面代碼如下所示

<div style='height:180px'> <!--v-model 綁定選中的集合options 樹節(jié)點(diǎn)數(shù)據(jù) defaultExpandLevel 展開層次，Infinity為所有 flat 為子節(jié)點(diǎn)不影響父節(jié)點(diǎn)，不關(guān)聯(lián) --> <treeselect v-model='value' :options='treedata' :multiple='true' :flat='true' :default-expand-level='Infinity' :open-on-click='true' :open-on-focus='true' clearable :max- /> </div>

<script>// import vue-treeselect componentimport Treeselect from ’@riophae/vue-treeselect’// import the stylesimport ’@riophae/vue-treeselect/dist/vue-treeselect.css’export default { name: ’Tree’, components: { Treeselect }, data() { return { // 過濾條件 filterText: ’’, // 初始化樹列表 treedata: [{ label: ’一級 1’, id: ’1’, children: [{ id: ’1-1’, label: ’二級 1-1’, children: [{ label: ’三級 1-1-1’, id: ’1-1-1’ }, { label: ’三級 1-1-2’, id: ’1-1-2’ }, { label: ’三級 1-1-3’, id: ’1-1-3’ }] }]} ], value: [’1-1-2’] } },................}</script>

來一張幾個樹列表一起的對比展示界面。

以上就是普通樹列表和下拉列表樹展示的界面效果，往往我們一些特殊的界面處理，就需要多利用一些封裝良好的第三方界面組件實現(xiàn)，可以豐富我們的界面展示效果

以上就是Vue Element前端應(yīng)用開發(fā)之樹列表組件的詳細(xì)內(nèi)容，更多關(guān)于Vue Element樹列表組件的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！