在我前面隨筆《循序漸進VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用》裏面曾經介紹過一些常規的界面組件的處理，主要介紹到單文本輸入框、多文本框、下拉列表，以及按鈕、圖片展示、彈出對話框、表單處理，本篇隨筆補充這一個主題，介紹樹列表組件和下拉列表樹組件在項目中的使用，以及一個SplitPanel的組件。
1、常規樹列表控件的使用
眾所周知，一般界面很多情況涉及到樹列表的處理，如類型展示，如果是一層的，可以用下拉列表代替，如果是多個層級的，採用樹控件展示會更加直觀。
在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 style="float: right; padding: 3px 0" type="text">操作按鈕</el-button>
</div>
<div>
<el-tree
style="padding-top:10px"
:data="treedata"
node-key="id"
default-expand-all
icon-class="el-icon-price-tag"
highlight-current
@node-click="handleNodeClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<i :class="node.icon ? node.icon : 'el-icon-price-tag'" />
{{ 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
style="padding-top:10px"
: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 :class="node.icon ? node.icon : 'el-icon-price-tag'" />
{{ 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"
class="filter-tree"
style="padding-top:10px"
: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 :class="node.icon ? node.icon : 'el-icon-price-tag'" />
{{ 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即可實現左側樹的展示，和右側常規列表查詢的處理。
2、下拉框樹列表的處理
除了常規的樹列表展示內容外，我們也需要一個在下拉列表中展示樹內容的界面組件。
這裏又得引入一個第三方的界面組件，因此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 value
value: null,
// define options
options: [ {
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-height="200"
/>
</div>
<script>
// import vue-treeselect component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@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 前端應用開發(1）--- 開發環境的準備工作
循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用
循序漸進VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理
循序漸進VUE+Element 前端應用開發(4）--- 獲取後端數據及產品信息頁面的處理
循序漸進VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展示和字段轉義處理
循序漸進VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用
循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函數
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】
※台北網頁設計公司這麼多該如何選擇?
※智慧手機時代的來臨，RWD網頁設計為架站首選
※評比南投搬家公司費用收費行情懶人包大公開
※回頭車貨運收費標準
※網頁設計最專業,超強功能平台可客製化
※別再煩惱如何寫文案,掌握八大原則!
Orignal From: 循序漸進VUE+Element 前端應用開發(8）--- 樹列表組件的使用,循序漸進VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展示和字段轉義處理,
留言
張貼留言