ElementUI 的 Tree 组件的基本使用实战教程
作者:一尾流莺_ 发布时间:2024-04-26 17:40:46
起因
事情是这样的,项目最近有个需求。服务器有个图片空间,说白了就是个文件夹。文件夹的结构大家都知道,一层一层的。然后需要在前端以树形展示。
具体的需求如下
可以新建子目录,但是只能新建二级, * 的时候新建按钮置灰。
在页面上展示父级目录名称和当前所在路径,用 ‘/’ 分隔。
根目录固定为 图片空间 。
页面首次打开的时候,请求接口,只返回一级目录,默认展示所有一级目录。
用户点击一级目录,根据所点击的一级目录对应的 id 请求接口返回二级目录,以此类推。
我当时看到这个需求的时候,心里想,这玩意我在 ElementUI
的官网见过,好说。结果当我去开发的时候,发现还是挺复杂的,于是我就花了点时间了研究一下,以防下次用的时候忘了。
处理
先把 elementUI
的官方例子拷下来。然后又随便添加了点内容。
<template>
<div>
<el-input v-model="input"
style="width:200px"
placeholder="请输入内容"></el-input>
<el-button type="primary">添加节点</el-button>
<span>当前目录:</span>
<span>当前目录的父级目录:</span>
<el-tree :data="data"
:props="defaultProps"
accordion
@node-click="handleNodeClick"></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
input: '',
data: [{
label: '图片空间',
children: [{
label: '蔬菜',
children: [{
label: '菠菜',
},
{
label: '生菜',
},
],
},
{
label: '水果',
children: [{
label: '香蕉',
}],
},
{
label: '美女',
children: [{
label: '秦岚',
}],
}],
}],
defaultProps: {
children: 'children',
label: 'label',
},
};
},
methods: {
handleNodeClick(data) {
console.log(data);
},
},
};
</script>
现在的界面是这样的。
需求一
先从最简单的开始吧。在任意目录下添加分类(子节点)。
然后我们去看文档怎么说。嗯,就是它了。
接收两个参数 (data, parentNode)
要追加的子节点的
data
子节点的
parent
的data
、key
或者node
第一个参数 data
在当前的例子中就是一个名字而已。第二个参数要传的东西怎么获取呢?
要给目录添加子节点,肯定要先点一下这个目录,那我们看看点击事件都能给我们返回什么东西。
可以看到第二个回调参数就是 节点对应的node
, 这不就有了么!那就来试一下。
修改代码如下,我们点击节点的时候,把点击事件回调的参数 node
先存在变量 nowClickNode
中,然后我们调用 append
方法的时候,再把 nowClickNode
给传过去。
// 为了节省篇幅,省略template中的代码,文末会贴出整体代码
methods: {
// 点击节点
handleNodeClick(nodes, node, self) {
this.nowClickNode = node;
},
// 添加节点
addSort() {
const data = {
label: '草莓',
};
this.$refs.tree.append(data, this.nowClickNode);
},
},
成功啦!
那么怎么实现只可以建二级目录, * 的时候置灰呢,我们点击的时候不是保存了一个变量 nowClickNode
么。
这个变量里面有个 level
属性,代表的就是层级。我通过计算属性来完成这个需求。
//template
<el-button type="primary"
:disabled='isDisabled'
@click='addSort'>添加节点</el-button>
//js
computed: {
// 是否可以新建分类
isDisabled() {
if (this.nowClickNode.level > 2) {
return true;
}
return false;
},
},
可以看到我们点击到 * 的时候按钮就禁用了。
需求二
接下来我们实现第二个需求,显示当前所在路径和父级目录。这个示例图看上面那张就可以了,已经实现了。
// 点击节点的时候触发事件
handleNodeClick(nodes, node, self) {
this.nowClickNode = node;
this.nowPathArr = [];
// 如果不是根节点
if (node.parent.parent) {
this.faterName = node.parent.data.label;
// 递归找路径
this.findParentName(node);
// 拼接路径
this.nowPath = `图片空间 / ${this.nowPathArr.join(' / ')}`;
} else {
// 如果是根节点 直接赋值
this.nowPath = '图片空间';
this.faterName = '- -';
}
},
// 查找父节点的分类名称
findParentName(node) {
if (node.parent.parent) {
this.nowPathArr.unshift(node.data.label);
this.findParentName(node.parent);
}
},
这个不知道怎么回事,我的根目录也有 parent
属性,所以只能再向上找一层,通过 parent.parent
存不存在来判断是不是根节点。
我是在点击的时候,递归查找点击节点的父元素,然后把所有祖代元素放在数组里,最后进行拼接。
需求三,四,五
剩下的三个需求放在一起讲,这个地方我练习的时候用的项目真实数据,不方便演示,代码也是经过脱敏处理的。重要的是知道怎么用就可以了。
//template
<el-tree
:data="treeData" //数据源
:props="defaultProps" //配置项
accordion //每次打开一个节点 手风琴模式
ref="tree" //用来获取dom
lazy //节点懒加载
:highlight-current='true' //高亮当前节点
:load='treeLoad' //懒加载时调用的方法
node-key="cateId" //唯一标识
:default-expanded-keys='defaultOpen' //默认打开的节点数组
:expand-on-click-node='true' //是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。
@node-click="handleNodeClick" //点击节点的回调函数
>
</el-tree>
//js
// 加载树形结构 就是上面懒加载绑定的函数
treeLoad(node, resolve) {
// 判断节点等级
if (node.level == 0) {
// 如果是根节点,添加一个固定的图片空间节点 这是实现需求三
resolve([{
cateName: '图片空间',
cateId: '0',
children: [],
}]);
}
// 不是根节点,调取接口加载列表 这里实现需求四,五的树结构懒加载,点完一级请求一级的数据
if (node.level >= 1) {
this.getCategoryListNew(node, resolve);
// 防止子节点为空时一直出现加载动画
return resolve([]);
}
},
// 获取树形结构 上面掉用的请求接口 data处理完之后要调用resolve方法
getCategoryListNew(node, resolve) {
Service.getCategoryListNew({ parentId: node.data.cateId }).then(({ data }) => {
resolve(data);
}).catch((e) => {
console.log(e);
});
},
其他知识点
另外记录几个知识点
默认展开节点
默认展开使用的是 :default-expanded-keys='defaultOpen'
属性, defaultOpen
里面存放的是 node-key
的数组。
横纵向滚动条
首先要给 tree
组件的外层添加 宽高
,以及 overflow
属性。然后要修改 el-tree
的属性。
.tree-box{
width: 200px;
height: calc(100% - 30px);
overflow:auto;
}
.el-tree {
display: inline-block;
min-width: 100%;
}
刷新某一个节点
// 通过节点id找到对应树节点对象
const node = this.$refs.tree.getNode(this.nodeId);
// 把loaded手动置为false,也就是告诉tree这个节点没有加载过
node.loaded = false;
// 主动调用展开节点方法,重新查询该节点下的所有子节点
node.expand();
模拟点击一级目录中第一个节点
// 选取dom
const root = document.querySelector('.el-tree-node__children');
// 找到目标节点
const firstNode = root.firstChild;
// 模拟点击
firstNode.click();
来源:https://blog.csdn.net/m0_48721669/article/details/118941478
猜你喜欢
- 在日常的测试工作中,我们的测试用例一般都是保存在Excel文件中,当然也有一些公司会使用Xmind来编写测试用例,那么为什么我们在这里只是讲
- 什么是Lambda表达式“Lambda 表达式”(lambda expression)是一个匿名函数,Lambda表达式基于数学中的λ演算得
- 在使用Celery统计每日访问数量的时候,发现一个任务会同时执行两次,发现同一时间内(1s内)竟然同时发送了两次任务,也就是同时产生了两个w
- 本文实例讲述了Python设计模式之享元模式原理与用法。分享给大家供大家参考,具体如下:享元模式(Flyweight Pattern):运用
- 最近遇到了Python访问SqlServer的问题,这里总结下。一、Windows下配置Python访问Sqlserver环境:Window
- Bootstrap简介Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JA
- 1. 整体思路首先我们来梳理下整体上的实现思路,首先一点:整体思路和 vhr 一模一样。考虑到有的小伙伴可能已经忘记 vhr 中前端动态菜单
- 听说最近流行JQ风格的语法,不流行EXT风格了一.//ajax类fw=window.fw||{};fw.ajax = { &nbs
- Rs.Open参数说明在ASP中经常用Rs.Open sql,conn,1,1这样的方式打开数据库,但仍有一部分同行不知道这是嘛意思,现整理
- QSS介绍前言QSS即Qt样式表,是用来自定义控件外观的一种机制,QSS大量参考了Css的内容,但QSS的功能要比Css弱得多,体现在选择器
- 本文实例讲述了python中栈的原理及实现方法。分享给大家供大家参考,具体如下:栈(stack),有些地方称为堆栈,是一种容器,可存入数据元
- 目录1、sysbench介绍#项目下载地址:2、sysbench安装过程#安装相关依赖#安装过程开始#提示说明:#常规命令行选项#sysbe
- 使用pandas处理向量化的数据,进行数据的替换时不仅仅能够进行字符串的替换也能够处理数字。做简单的示例如下:In [4]: data =
- 下载8000首儿歌的python的代码:#-*- coding: UTF-8 -*-from pyquery import PyQuery
- 1.resource fopen(string $filename, string $mode [,bool $us
- 项目场景:postman通常需要传递各式各样的参数,这样的话,进行写参数比较头疼,不知怎么进行传参。解决方案:可以考虑将参数对象写成json
- 如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷,涌现出大量优秀精美的网页。大量网络信息的呈现
- 概 述 现在有不少介绍利用ASP实现动态分页的文章,方法大同小异,就是每次利用ADO返回原始数据满足条件记录集中的指定
- 故事的开始:.count()假设你有一个Notification Model类,保存的主要是所有的站内通知:class Notificati
- 最近在看吴恩达的机器学习课程,自己用python实现了其中的logistic算法,并用梯度下降获取最优值。logistic分类是一个二分类问