element树形结构下拉组件组装对应格式数据

element树形结构下拉组件组装对应格式数据

 <el-row>
                <el-col :span="24">
                                 <el-form-item label="购买渠道" prop="treeData" class="grid-content bg-purple">
                                        <el-cascader
                                            v-model="testForm.treeData"
                                            :options="treeDataList"
                                            :props="props"
                                            clearable
                                            style="width:90%"
                                        >
                                        </el-cascader>
                                 </el-form-item>
                     </el-col>
            </el-row>

在created生命周期函数里面模拟设置接口返回的数据格式,并组装成树形下拉组件需要的数据格式

 created(){
            let list=[
                  {CL_NM:'购买渠道',NAME:'直接业务',ORDER_NO:1,VALUE:'001'},
                  {CL_NM:'购买渠道',NAME:'传统销售业务',ORDER_NO:1,VALUE:'001001'},
                  {CL_NM:'购买渠道',NAME:'销售模式',ORDER_NO:1,VALUE:'001001001'},
                  {CL_NM:'购买渠道',NAME:'电话销售业务',ORDER_NO:1,VALUE:'001002001'},
                  {CL_NM:'购买渠道',NAME:'个人代理业务',ORDER_NO:1,VALUE:'002001'},
                  {CL_NM:'购买渠道',NAME:'金融机构代理业务',ORDER_NO:1,VALUE:'002003001'},
                  {CL_NM:'购买渠道',NAME:'邮政代理业务',ORDER_NO:1,VALUE:'002003003001'},
                  {CL_NM:'购买渠道',NAME:'直面柜台',ORDER_NO:2,VALUE:'001001002'},
                  {CL_NM:'购买渠道',NAME:'新渠道直销业务',ORDER_NO:2,VALUE:'001002'},
                  {CL_NM:'购买渠道',NAME:'互联网销售业务',ORDER_NO:1,VALUE:'001002002'},
            ];
            this.treeDataList=this.changeData(list) // 这里使用changeData()这个函数方法对数据进行加工
    },

数据加工对应的方法函数

changeData(list){
                  let lv1list=[];
                  for(let i=0;i<list.length;i++){
                        let lv1=list[i].VALUE.length/3-1;
                        if(!lv1list[lv1]){
                            lv1list[lv1]={}
                        }
                        lv1list[lv1][list[i].VALUE]=({"value":list[i].VALUE,"label":list[i].NAME})
                  }
                  let parmap=null;
                  let submap=null;
                  for(let j=lv1list.length-2;j>=0;j--){  //从倒数第二级开始
                       parmap=lv1list[j]
                       submap=lv1list[j+1]
                       for(let k in parmap){
                             for(let m in submap){
                                     if(m.startsWith(k)){
                                           if(!parmap[k].children){
                                               parmap[k].children=[]
                                           }
                                           parmap[k].children.push(submap[m])
                                     }
                             }
                       }
                  }
                  let result=[]
                  for(let p in lv1list[0]){
                       result.push(lv1list[0][p])
                  }
                  return result
           },

最终数据显示效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/117969.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java web(六):FilterListenerAJAX

文章目录 一、Filter1.1 基本介绍1.2 过滤器的执行流程1.3 拦截路径配置1.4 过滤器链1.5 案例 二、Listener三、AJAX3.1 快速入门3.2 Axios异步框架 四、 JSON4.1 JSON基础语法4.2 Fastjson 五、 案例JSONAxiosServlet Java web的三大组件&#xff1a;Servlet、Filter、Listene…

mac电脑系统清理软件CleanMyMac X2024破解版下载

基本上&#xff0c;不管是win版还是Mac版的电脑&#xff0c;其装机必备就是一款电脑系统清理软件&#xff0c;就比如Mac&#xff0c;目前在市面上&#xff0c;电脑系统清理软件是非常多的。 对于不熟悉系统的用户来说&#xff0c;使用一些小众工具&#xff0c;往往很多用户都不…

SQL 左连接 LEFT JOIN 关键字||SQL右连接 RIGHT JOIN 关键字

SQL 左连接 LEFT JOIN 关键字 SQL左链接LEFT JOIN关键字返回左表&#xff08;表1&#xff09;中的所有行&#xff0c;即使在右表&#xff08;表2&#xff09;中没有匹配。如果在正确的表中没有匹配&#xff0c;结果是NULL。 SQL LEFT JOIN 语法 SELECT column_name(s) …

VSCode修改主题为Eclipse

前言 从参加开发以来&#xff0c;一直使用eclipse进行开发&#xff0c;基本官方出新版本&#xff0c;我都会更新。后来出来很多其他的IDE工具&#xff0c;我也尝试了&#xff0c;但他们的主题都把我劝退了&#xff0c;黑色主题是谁想出来&#xff1f;&#x1f602; 字体小的时…

腾讯云CVM S5服务器4核8G配置性能测评和优惠价格表

腾讯云4核8G服务器CVM标准型S5实例性能测评&#xff0c;包括CPU型号、内存、系统盘、CVM实例规格性能测评&#xff0c;腾讯云4核8G租用优惠价格表&#xff0c;腾讯云服务器网txyfwq.com分享腾讯云4核8G服务器CVM S5性能测评和优惠价格表&#xff1a; 腾讯云4核8G服务器CVM S5性…

「软件设计师」 2023年上半年上午真题解析

「软件设计师」 2023年上半年上午真题解析 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准备的 &…

【黑马程序员】Maven 进阶

文章目录 前言一、分模块开发与设计1. 分模块开发意义2. 分模块开发&#xff08;模块拆分&#xff09;2.1 创建 Maven 模块2.2 书写模块代码2.3 通过 Maven 指令安装模块到本地仓库&#xff08;install 指令&#xff09; 二、依赖管理1. 依赖传递1.1 依赖传递冲突问题 2. 可选依…

SAP-MM-批量扩充视图

MM50 可以通过这个程序批量维护或查看这个物料没有维护的视图&#xff0c;进行扩充。

Security ❀ UDP/TCP传输层常见DOS攻击详解

文章目录 1. UDP协议基础2. UDP Flood2.1. 攻击原理2.2. 防护方法 3. TCP三次握手和四次挥手3.1. 三次握手3.2. 四次挥手 4. SYN Flood4.1. 攻击原理4.2. 防护方法 5. SYN-ACK Flood5.1. 攻击原理5.2. 防护方法 6. ACK Flood6.1. 攻击原理6.2. 防护方法 7. FIN/RST Flood7.1. 攻…

YOLOv5算法改进(22)— 更换主干网络MobileNetv3 + 添加CA注意力机制

前言:Hello大家好,我是小哥谈。本节课就让我们结合论文来对YOLOv5进行组合改进(更换主干网络MobileNetv3 + 添加CA注意力机制),希望同学们学完本节课可以有所启迪,并且后期可以自行进行YOLOv5算法的改进!🌈 前期回顾: YOLOv5算法改进(1)— 如何去改进YOLOv5算法

MySQL进阶_5.逻辑架构和SQL执行流程

文章目录 第一节、逻辑架构剖析1.1、服务器处理客户端请求1.2、Connectors1.3、第1层&#xff1a;连接层1.4、第2层&#xff1a;服务层1.5、 第3层&#xff1a;引擎层1.6、 存储层1.7、小结 第二节、SQL执行流程2.1、查询缓存2.2、解析器2.3、优化器2.4、执行器 第三节、数据库…

2023年度总结

2023年度总结 我准备用两张图来总结我的2023年 第一张图是达克效应 邓宁-克鲁格效应指的是能力欠缺的人在自己欠考虑的决定的基础上得出错误结论&#xff0c;但是无法正确认识到自身的不足&#xff0c;辨别错误行为&#xff0c;是一种认知偏差现象。这些能力欠缺者们沉浸在自…

计算机毕设 基于大数据的抖音短视频数据分析与可视化 - python 大数据 可视化

文章目录 0 前言1 课题背景2 数据清洗3 数据可视化地区-用户观看时间分界线每周观看观看路径发布地点视频时长整体点赞、完播 4 进阶分析相关性分析留存率 5 深度分析客户价值判断 5 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;…

YOLO系列环境配置及训练

目录 前言 一、下载所需 1、Anaconda安装 2、NVIDIA 驱动程序安装 3、CUDA安装 4、CUDNN下载及配置 二、环境配置 1、虚拟环境创建 2、Pytorch安装 3、pycharm环境切换及剩余库的安装 4、YOLO代码的测试及训练配置步骤 &#xff08;1&#xff09;测试 &#xff08…

PubDef:使用公共模型防御迁移攻击

对抗性攻击对机器学习系统的可靠性和安全性构成了严重威胁。通过对输入进行微小的变动&#xff0c;攻击者就可以导致模型生成完全错误的输出。防御这种攻击是一个很活跃的研究领域&#xff0c;但大多数提议的防御措施都存在重大的缺点。 这篇来自加州大学伯克利分校研究人员的…

初始JVM虚拟机

JVM组成 图解 程序计数器 在JVM线程私有的内存区域中。每个线程都有自己独立的程序计数器。 程序计数器用于存储当前线程正在执行的字节码指令的地址。指示着当前线程执行到了哪一条字节码指令。 堆 是线程共享的区域&#xff0c;用于存储对象的实例和数组对象&#xff1b; …

青翼科技-国产化ARM系列TES720D-KIT

板卡概述 TES720D-KIT是专门针对我司TES720D&#xff08;基于复旦微FMQL20S400的全国产化ARM核心板&#xff09;的一套开发套件&#xff0c;它包含1个TES720D核心板&#xff0c;加上一个TES720D-EXT扩展底板。 FMQL20S400是复旦微电子研制的全可编程融合芯片&#xff0c;在单…

K8S知识点(三)

&#xff08;1&#xff09;环境搭建-环境初始化 Centos的版本是有要求的必须是7.5或以上&#xff0c;否则安装出来的集群是有问题的Node节点可能加入不到集群中来 详细步骤 1.同时连接三台服务器&#xff1a;查看一下版本 是否正确 2.主机名解析&#xff0c;方便节点之间的…

【ARMv8 SIMD和浮点指令编程】浮点加减乘除指令——四则运算

浮点指令有专门的加减乘除四则运算指令,比如 FADD、FSUB、FMUL、FDIV 等。 1 FADD (scalar) 浮点加法(标量)。该指令将两个源 SIMD&FP 寄存器的浮点值相加,并将结果写入目标 SIMD&FP 寄存器。 该指令可以产生浮点异常。根据 FPCR 中的设置,异常会导致在 FPSR 中…

Vue Vue3

1、创建VUE3工程 使用vue-cli创建&#xff1a; ## 查看vue/cli版本&#xff0c;确保vue/cli版本在4.5.0以上 vue --version ## 安装或者升级你的vue/cli npm install -g vue/cli ## 创建 vue create vue_test ## 启动 cd vue_test npm run serve 使用vite创建&#xff1a; …
最新文章