而对于树列表,可以进行一个过滤处理操作,如下界面所示。
在内容区增加一个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即可实现左侧树的展示,和右侧常规列表查询的处理。
=======================================================================
除了常规的树列表展示内容外,我们也需要一个在下拉列表中展示树内容的界面组件。
这里又得引入一个第三方的界面组件,因此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%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料,免费分享给大家,戳这里即可免费领取
RJhD-1712340767204)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料,免费分享给大家,戳这里即可免费领取
[外链图片转存中…(img-ghEmeoR3-1712340767205)]