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

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

簡單的代碼如下所示

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

主要在script部分里面指定它的data數據，以及單擊節點的事件處理，結合卡片控件的展示，我們可以把樹放在其中進行展示

界面代碼如下所示，通過default-expand-all 可以設置全部展開，icon-class 指定節點圖標（也可以默認不指定）

<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'，來指定樹列表的展現內容，可以加入圖標等信息

而在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’ }] }]} ]

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

主要設置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>

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

在內容區增加一個input的文本框進行過濾處理，并綁定對應的屬性變量

<el-input v-model='filterText' placeholder='輸入關鍵字進行過濾' clearable prefix-icon='el-icon-search'/>

樹列表控件需要增加過濾函數綁定: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過濾的綁定值，變化就進行過濾處理。

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

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

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即可實現左側樹的展示，和右側常規列表查詢的處理。

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

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

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

官網地址：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則是樹列表的節點數據。

<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 樹節點數據 defaultExpandLevel 展開層次，Infinity為所有 flat 為子節點不影響父節點，不關聯 --> <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>

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

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

以上就是Vue Element前端應用開發之樹列表組件的詳細內容，更多關于Vue Element樹列表組件的資料請關注好吧啦網其它相關文章！