循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用

而对于树列表，可以进行一个过滤处理操作，如下界面所示。

在内容区增加一个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”

{{ node.label }}

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’

它的使用代码也很简单:

1

2

3

4

5

我的列表界面使用了两个Panel即可实现左侧树的展示，和右侧常规列表查询的处理。

2、下拉框树列表的处理

=======================================================================

除了常规的树列表展示内容外，我们也需要一个在下拉列表中展示树内容的界面组件。

这里又得引入一个第三方的界面组件，因此Element的Select组件不支持树列表。

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

官网地址：https://vue-treeselect.js.org/

NPM安装：

npm install --save @riophae/vue-treeselect

界面代码如下所示。

这里的value就是选中的集合，options则是树列表的节点数据。

我的测试界面代码如下所示:

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

/>

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

后记

---

总结一下这三次面试下来我的经验是：

1. 一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！

2. 代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！

3. 尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

4. 多刷面经！

我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】免费获取。祝大家早日拿到自己心怡的工作！

篇幅有限，仅展示部分内容

之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！

3. 尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

4. 多刷面经！

我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】免费获取。祝大家早日拿到自己心怡的工作！

篇幅有限，仅展示部分内容