位置: IT常识 - 正文

Element-UI控件Tree实现数据树形结构(element ui el-tree)

编辑:rootadmin
Element-UI控件Tree实现数据树形结构

推荐整理分享Element-UI控件Tree实现数据树形结构(element ui el-tree),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui树形控件选中,element ui tree 默认选中,element ui tree props,element ui tree props,element ui tree props,element ui树形控件,element ui tree组件,element-ui tree,内容如对您有帮助,希望把文章链接给更多的朋友!

        在前端开发中,有时会遇到所有菜单数据在同一级的情况,后端未对数据进行分级处理;但前端渲染需要是树状结构的数据,如何实现数据的树状化?将数组中通过父节点的ID与子节点的parentId关联,通过递归函数来实现。

        前端框架这里使用element-ui的tree控件来实现,对其不了解可以去官网查看文档。

地址:Element - The world's most popular Vue UI framework

一、创建页面

        这里就不讲vue项目的搭建了,基础不好的,可以去官网查看文档。

        首先在src/pages目录中,创建element-trees文件夹,再创建index.vue,代码如下:

<template> <div class="tree-container"> </div></template><script> export default { data(){ return {} }, created() {}, methods: {} }</script><style lang="scss"></style>

        在类选择器tree-container容器中,添加相关按钮和Tree控件,以及给容器添加些样式进行修饰一下,代码如下:

<template> <div class="tree-container"> <div class="top-box"> <el-button type="primary" size="mini" @click="appendNode">添加菜单</el-button> <el-button type="info" size="mini" @click="removeSelected">删除选中项</el-button> </div> <el-tree ref="tree" :data="treeData" :props="props" accordion show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <span> <el-button type="text" size="mini" @click="append(data)">添加</el-button> <el-button type="text" size="mini" @click="editor(data)">修改</el-button> <el-button type="text" size="mini"@click="remove(node, data)">删除</el-button> </span> </span> </el-tree> </div></template><script> export default { data(){ return { props: { label: 'name', children: 'children' }, treeData: [] } }, created() {}, methods: { //添加父节点数据 appendNode(){}, //添加子项数据 append(data){}, //编辑数据 editor(data){}, //移出项目 remove(node, data){}, //删除选中的节点 removeSelected(){} } }</script><style lang="scss">.tree-container{ width: 360px; font-size: 12px; .top-box{ text-align: right; padding-bottom: 20px; }}.custom-tree-node {flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;}</style>

此时页面效果如下:

二、模拟数据

        在element-trees文件夹中添加data.js文件,用来存储模拟数据。代码如下:

/** * 模拟数据 */const dataList = [ { "name": "网络安全渗透工程师体系大纲", "pid": 0, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 1 }, { "name": "WEB通信、前后端原理", "pid": 1, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 2 }, { "name": "信息收集", "pid": 1, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 3 }, { "name": "注入全方位利用+数据库注入", "pid": 1, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 4 }, { "name": "前端渗透、文件上传解析漏洞", "pid": 1, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 5 }, { "name": "漏洞利用", "pid": 1, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 6 }, { "name": "漏洞挖掘", "pid": 1, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 7 }, { "name": "Web服务器通信原理", "pid": 2, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 8 }, { "name": "后端基础SQL", "pid": 2, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 9 }, { "name": "数据库简介及SQL语法", "pid": 2, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 10 }, { "name": "后端基础SQL高级查询与子查询", "pid": 2, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 11 }, { "name": "后端基础PHP简介及基本函数上", "pid": 2, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 12 }, { "name": "后端基础PHP—表单验证", "pid": 2, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 13 }, { "name": "正则表达式", "pid": 2, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 14 }, { "name": "信息搜集的意义 — 渗透测试的灵魂", "pid": 3, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 15 }, { "name": "信息收集(一)", "pid": 3, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 16 }, { "name": "网络架构-信息收集", "pid": 3, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 17 }, { "name": "前端-信息收集", "pid": 3, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 18 }, { "name": "系统-信息收集", "pid": 3, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 19 }, { "name": "SQL注入的原理", "pid": 4, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 20 }, { "name": "渗透测试常用工具讲解", "pid": 4, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 21 }, { "name": "POST注入/HEAD注入", "pid": 4, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 22 }, { "name": "盲注", "pid": 4, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 23 }, { "name": "XSS的原理分析与解剖", "pid": 5, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 24 }, { "name": "存储型XSS", "pid": 5, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 25 }, { "name": " Dom Based XSS", "pid": 5, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 26 }, { "name": "XXE实体注入", "pid": 6, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 27 }, { "name": "SSRF-服务器端请求伪造", "pid": 6, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 28 }, { "name": "验证码绕过、密码找回漏洞", "pid": 7, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 29 }, { "name": "平行越权、垂直越权", "pid": 7, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 30 }, { "name": "支付漏洞", "pid": 7, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 31 }, { "name": "Sql注入", "pid": 7, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 32 }, { "name": "变量覆盖漏洞", "pid": 6, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 33 }, { "name": "本地包含与远程包含", "pid": 6, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 34 }, { "name": "unserialize反序列化漏洞", "pid": 6, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 35 }, { "name": "CSRF", "pid": 5, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 36 }, { "name": "文件上传解析漏洞", "pid": 5, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 37 }, { "name": "宽字节注入", "pid": 4, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 38 }, { "name": "Accsess注入 — Cookie注入", "pid": 4, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 39 }, { "name": "Accsess注入 — 偏移注入", "pid": 4, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 40 }, { "name": "MySQL注入 — Dns 注入", "pid": 4, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 41 }, { "name": "MSSQL注入 — 反弹注入", "pid": 4, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 42 }, { "name": "Oracle注入 — 报错注入", "pid": 4, "createtime": "2023-03-29", "updatetime": "2023-03-29", "id": 43 }];export default dataList;

        文件创建好后,我们将其引入到index.vue文件中,代码如下:

<script> import DataList from './data' export default { data(){ return { props: { label: 'name', children: 'children' }, treeData: [] } }, created() { this.loadNode(); }, methods: { //加载节点数据 loadNode(){ this.treeData = DataList.map(item => item); }, //略... } }</script>

        如上代码,通过loadNode()函数执行后,模拟数据则已与Tree控件进行了双方绑定。但是页面中显示的数据,全都显示在同级位置。数据的归类分级,我们在后面再讲解。页面效果如下:

三、递归函数

        此时离成功紧一步之遥了,我们先来分析下data.js中的数据结构。如下图:

        如何将数据归类分级呢,可以通过循环判断,每级的id与数据中的pid进行关联;比如第一条数据id为1,将数组进行遍历查询判断pid有为1的数据,则表示其有子项数据,将其子项数据添加到children数组中。pid为0的为一级数据,所以当定义递归函数时,传入的pid默认为0。

Element-UI控件Tree实现数据树形结构(element ui el-tree)

        这里层次有可能是1层,2层,3层...... n层,要一层一层循环判断,就太麻烦了;所以这里我们要使用递归方法,来实现n层级的数据处理。

        在src下创建utils/utils.js文件,在utils.js中定义递归函数,代码如下:

/** * 递归函数 * @param arr 数组 * @param pid 父ID,不传默认为0 */export const DGFilterTrees = (arr, pid = 0) => {let newArr = [];//循环数组arr.forEach((item, i) => {//判断pid与遍历元素中pid相同的数据,相等的为同级数据,追加到该级数组中if(item.pid == pid){newArr.push(item);/** * 判断该item元素是否有子项 * 当数组中有元素的pid与item.id相等,some函数会返回true,表示该元素有子项数据 */if(arr.some(ele => ele.pid == item.id)){//此时,通过重新调用本函数进行递归处理item['children'] = DGFilterTrees(arr, item.id);}}});return newArr;}

注:递归算法是一种直接或者间接调用自身函数或者方法的算法。

递归算法的特点:

递归就是方法里调用自身。在使用递增归策略时,必须有一个明确的递归结束条件,称为递归出口。递归算法解题通常显得很简洁,但递归算法解题的运行效率较低。所以一般不提倡用递归算法设计程序。在递归调用的过程当中系统为每一层的返回点、局部量等开辟了栈来存储。递归次数过多容易造成栈溢出等,所以一般不提倡用递归算法设计程序。

所以在使用递归算法时,一定要注意判断条件能正常退出,否则无法靠自身的控制终止的循环,会导致栈溢出,程序卡死等问题。

  将DGFilterTrees()递归函数引入到index.vue中,将模拟数据重组,代码如下:

<script> import DataList from './data' import DGFilterTrees from '@/utils/utils.js' export default { data(){ return { props: { label: 'name', children: 'children' }, treeData: [] } }, created() { this.loadNode(); }, methods: { //加载节点数据 loadNode(){ this.treeData = DGFilterTrees(DataList); }, //略... } }</script>

        此时,所有数据都进行了归类分级显示,页面的效果图如下:

四、选中后显示按钮

        如上图,我们会发现每项后面的添加、修改、删除全显示出来,会显示拥挤并不方便操作。这里我们将节点输出后会发现,可以使用isCurrent来判断,只显示选中当前项的按钮。

         在span标签上添加v-if,判断node.isCurrent是否为true,代码如下:

<el-treeref="tree":data="treeData":props="props"accordionshow-checkboxnode-key="id"default-expand-all:expand-on-click-node="false"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span v-if="node.isCurrent"><el-button type="text" size="mini" @click="append(data)">添加</el-button><el-button type="text" size="mini" @click="editor(data)">修改</el-button><el-button type="text" size="mini"@click="remove(node, data)">删除</el-button></span></span></el-tree>

        如下图,点击选择”后端基础SQL“后,会显示后面的操作按钮。

 五、删除元素

        这里我们是使用本地定义模拟数据进行操作的,所以没有真实项目中是通过接口进行数据的增删改查部分。代码如下:

//移出项目remove(node, data){if(Array.isArray(data['children'])&&data.children.length>0){this.$message.error('当前数据有子项,无法删除~');return;}//查询数据位置索引let index = DataList.findIndex(item => item.id==data.id);//删除指定位置数据DataList.splice(index, 1);//重新加载数据this.loadNode();}

        效果如下图:

五、删除多选项 

        这里需要使用Tree控件的getCheckedNodes()函数,来获取被选中项;然后通过循环,删除每条被选中元素,代码如下:

//删除选中的节点removeSelected(){//获取选中的数据let checks = this.$refs.tree.getCheckedNodes();//循环删除选中checks.forEach(item => {DataList.splice(DataList.findIndex(sub => sub.id == item.id), 1);});//重新加载数据this.loadNode();}

        效果如下图:

        本期就先介绍到这,添加、修改等功能也比较简单,可以通过element-ui的$prompt弹框控件来实现。

本文链接地址:https://www.jiuchutong.com/zhishi/288940.html 转载请保留说明!

上一篇:同步与异步的认识(同步和异步的关系)

下一篇:伦索伊斯马拉年塞斯国家公园,巴西巴雷里尼亚斯市 (© WIN-Initiative/Getty Images)(伦索伊斯马拉赫塞斯国家公园)

  • 人生励志故事(人生励志故事精选)

    人生励志故事(人生励志故事精选)

  • 拼多多消息出现在桌面怎么取消(拼多多消息出现在桌面怎么取消华为)

    拼多多消息出现在桌面怎么取消(拼多多消息出现在桌面怎么取消华为)

  • 荣耀x10支持屏幕指纹解锁吗(荣耀x10屏幕是哪个厂家的)

    荣耀x10支持屏幕指纹解锁吗(荣耀x10屏幕是哪个厂家的)

  • 只知道微信名可以加好友吗(只知道微信名可以起诉吗)

    只知道微信名可以加好友吗(只知道微信名可以起诉吗)

  • 苹果网页下载安装不了(苹果下载网页app怎么安装)

    苹果网页下载安装不了(苹果下载网页app怎么安装)

  • 华为畅享10没有指纹解锁(华为畅享10没有语音唤醒功能)

    华为畅享10没有指纹解锁(华为畅享10没有语音唤醒功能)

  • 为什么陌生号码打不进来电话(为什么陌生号码打电话打不进来)

    为什么陌生号码打不进来电话(为什么陌生号码打电话打不进来)

  • 抖音可以发红包吗(抖音可以发红包最多能发多少)

    抖音可以发红包吗(抖音可以发红包最多能发多少)

  • 注销的抖音号能恢复吗(抖音号认证)

    注销的抖音号能恢复吗(抖音号认证)

  • 外国人的抖音叫什么(外国的抖音叫什么)

    外国人的抖音叫什么(外国的抖音叫什么)

  • oppoa9手机怎么关机啊(oppoa9手机怎么关闭开发者模式)

    oppoa9手机怎么关机啊(oppoa9手机怎么关闭开发者模式)

  • 怪兽充电归还后显示使用中(怪兽充电归还后灯不亮)

    怪兽充电归还后显示使用中(怪兽充电归还后灯不亮)

  • oppor9st怎么分屏操作(oppor9st怎么分屏操作方法)

    oppor9st怎么分屏操作(oppor9st怎么分屏操作方法)

  • 荣耀9x玻璃机身易碎吗(荣耀9背面玻璃)

    荣耀9x玻璃机身易碎吗(荣耀9背面玻璃)

  • 关联qq能看到隐藏对话吗(关联qq能看到隐藏会话发的消息吗)

    关联qq能看到隐藏对话吗(关联qq能看到隐藏会话发的消息吗)

  • 京东e卡绑定了还能转让吗(京东e卡绑定了可以退款吗)

    京东e卡绑定了还能转让吗(京东e卡绑定了可以退款吗)

  • 20和20pro区别(20和20pro哪个更值得买)

    20和20pro区别(20和20pro哪个更值得买)

  • 怎么录制mp3格式的录音(怎么录制mp3格式的录音视频)

    怎么录制mp3格式的录音(怎么录制mp3格式的录音视频)

  • 手机可以办理银行卡吗(手机可以办理银行短信通知业务吗?)

    手机可以办理银行卡吗(手机可以办理银行短信通知业务吗?)

  • 手机怎么语音(手机怎么语音控制空调)

    手机怎么语音(手机怎么语音控制空调)

  • 手机支付宝怎么充话费(手机支付宝怎么买彩票双色球)

    手机支付宝怎么充话费(手机支付宝怎么买彩票双色球)

  • 苹果xsmax怎么打开广角(苹果xsmax怎么打开无线充电)

    苹果xsmax怎么打开广角(苹果xsmax怎么打开无线充电)

  • win10打印机在哪(win10打印机在哪里找)

    win10打印机在哪(win10打印机在哪里找)

  • 淘宝待收货怎么删除(淘宝待收货怎么申请退货退款流程)

    淘宝待收货怎么删除(淘宝待收货怎么申请退货退款流程)

  • 怎样通过手机号查找对方位置(怎样通过手机号查对方信息)

    怎样通过手机号查找对方位置(怎样通过手机号查对方信息)

  • vivoz3支持闪充吗(vivoz3i带闪充电功能吗?)

    vivoz3支持闪充吗(vivoz3i带闪充电功能吗?)

  • 商家怎么修改配送范围(商家怎么修改配送费)

    商家怎么修改配送范围(商家怎么修改配送费)

  • excel排序1234拉不了(excel排序不行怎么办)

    excel排序1234拉不了(excel排序不行怎么办)

  • 一次性购入固定资产投资收益
  • 滞纳税款和滞纳金比例
  • 什么情况下要交个人所得纳税
  • 滴滴打车电子票怎么取票
  • 流转税收入怎么算
  • 期间费用的控制方法主要有
  • 银行承兑汇票到期日后多久可以承兑
  • 转出上年的进项税额怎么做分录
  • 自产产品用于捐赠的会计处理
  • 利息收入红冲怎么做
  • 销售原材料的账务处理
  • 红字发票交税吗
  • 个税跨年的可以补报吗
  • 小规模农产品可以抵扣吗
  • 企业所得税是怎么来的?
  • win7文件打开方式选错了如何恢复
  • 王者荣耀中太乙真人的技能有哪些?
  • 多结转成本会导致什么
  • 明股实债和明债实股
  • 单位性质有哪些类型
  • bootice.exe
  • 印花税按次按月
  • 企业扣除内容有哪些
  • 逾期利息算法
  • php教程100
  • 罚款在企业所得税前可以扣除吗
  • php框架怎么使用
  • 厂房改造支出可以计入厂房价值吗
  • 结转损益类收入科目分录
  • 流动资产损失
  • 暂估金额与发票金额会影响什么信息
  • gps定位器怎么开启
  • convwthn如何定义
  • 特征提取原理
  • faster rcnn详解
  • 活动补助会计分录
  • 公转私法人
  • php headers
  • 5年前开的发票退货可以冲红吗?
  • discuz mysql8.0
  • select
  • 织梦艺嫣跳舞
  • 收到生育津贴如何入账
  • 挖机租赁如何做账
  • 网银转账往来款怎么做账
  • 送货单和收款收据的区别
  • 钢材贸易公司如何经营
  • 增值税和个人所得税怎么算
  • 企业收到的
  • 挂靠的项目如何做账?
  • 投标保证金如何规定
  • 押金可不可以抵房租
  • 购置办公大楼,会计处理
  • 无偿使用期限
  • 技术人员工资条
  • 应付利息怎么记账
  • 根据企业会计准则第11号规定,下列关于等待期
  • 买别人的银行卡是啥罪
  • 企业明细是什么
  • mysql数据库基本知识点总结
  • centos彻底删除文件命令
  • windows 11安全模式
  • windows地图导航
  • openssh centos
  • softmangerlite.exe是什么进程 有什么用
  • u盘背景图片设置方法
  • win8引导盘
  • WIN7系统屏幕亮度哪里设置
  • perl处理特殊符号
  • javascript 语言精粹(修订版)
  • cocos2d怎么用
  • jQuery on绑定的事件
  • 批处理自动登录有密码的程序
  • android study
  • net命令大全
  • Shell、Perl、Python、PHP访问 MySQL 数据库代码实例
  • python函数设置
  • javascript简单代码
  • 深圳市国家税务局电话
  • 外汇管理数字外管平台怎么登录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设