您好,登錄后才能下訂單哦!
怎么在Vue中使用Element實(shí)現(xiàn)一個(gè)樹(shù)列表組件?針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
眾所周知,一般界面很多情況涉及到樹(shù)列表的處理,如類(lèi)型展示,如果是一層的,可以用下拉列表代替,如果是多個(gè)層級(jí)的,采用樹(shù)控件展示會(huì)更加直觀(guān)。
在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é)合卡片控件的展示,我們可以把樹(shù)放在其中進(jìn)行展示
界面代碼如下所示,通過(guò)default-expand-all 可以設(shè)置全部展開(kāi),icon-class 指定節(jié)點(diǎn)圖標(biāo)(也可以默認(rèn)不指定)
<el-card class="box-card"> <div slot="header" class="clearfix"> <span>樹(shù)列表</span> <el-button type="text">操作按鈕</el-button> </div> <div> <el-tree :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>
其中界面里面,我們通過(guò)class="custom-tree-node",來(lái)指定樹(shù)列表的展現(xiàn)內(nèi)容,可以加入圖標(biāo)等信息
而在script里面,定義了一個(gè)treedata的屬性
// 初始化樹(shù)列表 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 :class="node.icon ? node.icon : 'el-icon-price-tag'" /> {{ node.label }} </span> </span> </el-tree>
而對(duì)于樹(shù)列表,可以進(jìn)行一個(gè)過(guò)濾處理操作,如下界面所示。
在內(nèi)容區(qū)增加一個(gè)input的文本框進(jìn)行過(guò)濾處理,并綁定對(duì)應(yīng)的屬性變量
<el-input v-model="filterText" placeholder="輸入關(guān)鍵字進(jìn)行過(guò)濾" clearable prefix-icon="el-icon-search" />
樹(shù)列表控件需要增加過(guò)濾函數(shù)綁定:filter-node-method="filterNode",如下代碼所示。
<el-tree ref="tree" class="filter-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 :class="node.icon ? node.icon : 'el-icon-price-tag'" /> {{ node.label }} </span> </span> </el-tree>
script的處理代碼如下所示,需要watch過(guò)濾的綁定值,變化就進(jìn)行過(guò)濾處理。
為了在列表結(jié)合中進(jìn)行快速的過(guò)濾,我們可以在上次介紹的列表界面里面增加一個(gè)樹(shù)列表的快速查詢(xún)處理。如下界面所示。
這里列表里面增加了一個(gè)第三方組件splitpanes,用來(lái)劃分區(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 > <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è)樹(shù)的展示,和右側(cè)常規(guī)列表查詢(xún)的處理。
除了常規(guī)的樹(shù)列表展示內(nèi)容外,我們也需要一個(gè)在下拉列表中展示樹(shù)內(nèi)容的界面組件。
這里又得引入一個(gè)第三方的界面組件,因此Element的Select組件不支持樹(shù)列表。
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則是樹(shù)列表的節(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 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>
我的測(cè)試界面代碼如下所示
<div > <!-- v-model 綁定選中的集合 options 樹(shù)節(jié)點(diǎn)數(shù)據(jù) defaultExpandLevel 展開(kāi)層次,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-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 { // 過(guò)濾條件 filterText: '', // 初始化樹(shù)列表 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>
來(lái)一張幾個(gè)樹(shù)列表一起的對(duì)比展示界面。
Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫(kù)只關(guān)注視圖層,方便與第三方庫(kù)和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。
關(guān)于怎么在Vue中使用Element實(shí)現(xiàn)一個(gè)樹(shù)列表組件問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開(kāi),可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。