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

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

簡(jiǎ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里面，定義了一個(gè)treedata的屬性

// 初始化樹列表 treedata: [{ label: ’一級(jí) 1’, id: ’1’, children: [{ id: ’1-1’, label: ’二級(jí) 1-1’, children: [{ label: ’三級(jí) 1-1-1’, id: ’1-1-1’ }, { label: ’三級(jí) 1-1-2’, id: ’1-1-2’ }, { label: ’三級(jí) 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>

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

在內(nèi)容區(qū)增加一個(gè)input的文本框進(jìn)行過濾處理，并綁定對(duì)應(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)行快速的過濾，我們可以在上次介紹的列表界面里面增加一個(gè)樹列表的快速查詢處理。如下界面所示。

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

https://github.com/antoniandre/splitpanes

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

效果大概如下所示

npm安裝如下所示

npm i --S splitpanes

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

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

它的使用代碼也很簡(jiǎn)單

<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>

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

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

這里又得引入一個(gè)第三方的界面組件，因此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>

我的測(cè)試界面代碼如下所示

<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: ’一級(jí) 1’, id: ’1’, children: [{ id: ’1-1’, label: ’二級(jí) 1-1’, children: [{ label: ’三級(jí) 1-1-1’, id: ’1-1-1’ }, { label: ’三級(jí) 1-1-2’, id: ’1-1-2’ }, { label: ’三級(jí) 1-1-3’, id: ’1-1-3’ }] }]} ], value: [’1-1-2’] } },................}</script>

來一張幾個(gè)樹列表一起的對(duì)比展示界面。

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

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