[vue3] Tree/TreeSelect树形控件使用

news2024/11/10 11:19:59

✨✨个人主页:沫洺的主页

 📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏 

                           📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

💖💖如果文章对你有所帮助请留下三连✨✨

🍨效果图

🍹核心代码实现

Element Plus: Tree Tree 树形控件

Element Plus: TreeSelect TreeSelect 树形选择

含有下拉菜单的树形选择器,结合了 el-tree 和 el-selectt 两个组件的功能。

<el-tree-select v-model="formData.parentId" :check-strictly="true" :data="categoryTreeData"
        :render-after-expand="false" :default-expand-all="true" />
  • data 展示数据
  • render-after-expand 属性是默认开启的,所选择的标签名可能不会及时更新显示,您可以把该属性设置为 false 来显示正确的名称
  • 当属性 check-strictly=true 时,任何节点都可以被选择,否则只有子节点可被选择
  • default-expand-all 是否默认展开所有节点

data的数据结构

const data = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
]

这是一种父子关系的数据结构,所以在创建数据库时需要对应的关系结构如下

上面的value映射id,label映射name,children代表子类

后端接口

            <dependency>
                <groupId>cn.hutool</groupId>
                <artifactId>hutool-all</artifactId>
                <version>5.8.5</version>
            </dependency>

hutool工具: 树结构工具 中有个自定义字段名的方法

使用如下

@GetMapping("/tree")
    public  List<Tree<Integer>> select(){
        //这里用的MyBatis Plus
        List<CategoryDto> dtos = categoryService.select(new CategoryQueryDto());
        //配置
        TreeNodeConfig treeNodeConfig = new TreeNodeConfig();
        // 自定义属性名 都要默认值的
        treeNodeConfig.setWeightKey("seq");
        treeNodeConfig.setIdKey("id");
        // 最大递归深度
        treeNodeConfig.setDeep(2);
        //转换器
        List<Tree<Integer>> treeNodes = TreeUtil.build(dtos, 0, treeNodeConfig,
                (treeNode, tree) -> {
                    tree.setId(treeNode.getId());
                    tree.setParentId(treeNode.getParentId());
                    tree.setWeight(treeNode.getSeq());
                    tree.setName(treeNode.getName());
                    // 扩展属性 ...
                    tree.putExtra("value", treeNode.getId());
                    tree.putExtra("label", treeNode.getName());
                });
        return treeNodes;
    }

返回treeNodes格式如下

上面的id,seq,parentId,name,这些数据根据需求去考虑是否获取

关键的是扩展属性value,label这两必须要有,目的是与前端树data结构中的value,label照应

// 扩展属性 ...
tree.putExtra("value", treeNode.getId());
tree.putExtra("label", treeNode.getName());

前端调用接口给:data="categoryTreeData"赋值

const categoryTreeData = ref([{ value: 0, label: "全部一级类目" }])
const callCategoryTreeApi = () => {
  categoryApi.tree.call().then((res:any) => {
    // concat 合并数组
    categoryTreeData.value = categoryTreeData.value.concat(res)
  })
}

补充: v-model="formData.parentId"双向绑定父类ID(parentId),主要作用就是赋值和获取值

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【定语从句练习题】That 、who、whom、省略

1. 改写训练 1.I’d like to speak to the person that wrote this letter. 主 2.The tomatoes that I bought yesterday. 宾&#xff0c;可以去掉 3.Joe’s got a motorbike that can do 200Km an hour. 主 4.Is that the computer that doesn’t work. 主 5.Those are trous…

[操作系统笔记]处理机调度

调度算法 名称英文作业调度进程调度说明特点先来先服务First-come first-served, FCFS适用适用按作业到达先后顺序&#xff08;即优先考虑等待时间最长的&#xff09;非抢占式短作业优先short job first, SJF适用适用作业越短&#xff08;即运行时间越短&#xff09;优先级越高…

SpringBoot异常:Process finished with exit code 0 | Tomcat服务没有启动 | 无法通过浏览器访问

错误信息 启动springBoot项目后&#xff0c;打印信息如下 意思是&#xff1a;我该执行的程序已执行完毕&#xff0c;并正常退出。 希望提示&#xff1a;打印Tomcat已在8080端口启动&#xff0c;可以通过浏览器访问&#xff0c;如果是这个问题&#xff0c;继续向下浏览&#xf…

标准库类型string和vector

一、命名空间 std::cinstd就是命名空间&#xff0c; 这个的含义是 &#xff1a;编译器应该从操作符左侧的名字所示的作用域std中去寻找cin。 另一种方式就是在开头显式进行说明&#xff1a; using std::cin;这样一来后续就不用再去在每条语句中显式说明了。 需要注意的是&…

微信小程序实战 wx.showNavigationBarLoading(),下拉动画配置无效

文章目录前情提要原因分析实战解析最后前情提要 下拉刷新一定是移动端常用操作&#xff0c;微信小程序官方集成了下拉刷新监听函数onPullDownRefresh(),以及显示下拉动画apiwx.showNavigationBarLoading(),但是我们在初次接触这个api发现&#xff0c;调用该函数动画不显示&…

头歌-信息安全技术-Spectre侧信道攻击过程验证

头歌-信息安全技术-Spectre侧信道攻击过程验证一、第1关&#xff1a;Cache vs Memory1、编程要求2、评测代码二、第2关&#xff1a;基于FlushReload的侧信道实现1、编程要求2、评测代码三、第3关&#xff1a;Spectre预测执行1、编程要求2、评测代码四、第4关&#xff1a;Spectr…

【Unity】关于升级到2021.3.12之后URP编译错误的问题

前几天&#xff0c;我一时兴起&#xff0c;把Unity从2021.3.11 LTS 升级到 2021.3.12 LTS&#xff0c;本来以为不会有啥区别&#xff0c;然后意想不到的是&#xff0c;居然出现了编译错误&#xff1a; 我一开始以为这个就是我的工程设置有问题&#xff0c;然后我就就新…

前端面试之Vue专题

目录 前言 MVVM模式 Vue的响应式原理 路由守卫 前言 网上有许多前端八股文&#xff0c;但是缺少便于理解的说明和案例&#xff0c;需要自行查阅资料。这篇文章我就按照面试的高频题来记录自己的理解和实操。 MVVM模式 一、三者含义 M是Model&#xff0c;数据模型&#xf…

非项目活动的时间怎么跟踪?

会计、审计、合规和专业服务企业通常需要跟踪花费在项目和非项目上的时间以进行报告。员工可以使用8Manage工时表这样的工具来获取与项目和非项目任务相关的工作时间&#xff0c;并记录管理时间。 非项目时间类别确定在项目工作之外发生的不同类型的活动。你可以在工时表解决方…

【网络篇】第六篇——网络套接字编程(二)(UDP详解)

基于UDP协议的套接字程序 服务端 服务端创建套接字 服务的绑定 字符串IP VS 整数IP 运行服务器 客户端 客户端创建套接字 客户端绑定 启动客户端 本地测试 INADDR_ANY 简易的回声服务器 网络测试 基于UDP协议的套接字程序 服务端 服务端创建套接字 我们把服务…

重学Android基础系列篇(三):架构动态编程技术原理

前言 本系列文章主要是汇总了一下大佬们的技术文章&#xff0c;属于Android基础部分&#xff0c;作为一名合格的安卓开发工程师&#xff0c;咱们肯定要熟练掌握java和android&#xff0c;本期就来说说这些~ [非商业用途,如有侵权,请告知我,我会删除] DD一下&#xff1a; And…

基于形状的匹配提纲

关键&#xff1a;形状&#xff0c;其实就是canny找出来的线条集合 1&#xff0c;canny线条 2&#xff0c;模板的线条&#xff08;基于canny&#xff09; 3&#xff0c;高斯金字塔&#xff0c;加速高斯法 4&#xff0c;没有旋转和尺度时&#xff0c;匹配一个有得分的结果&am…

Linux-vim使用

目录 基本vim的基本操作&#xff1a; 命令模式&#xff1a; 光标定位&#xff1a; $&#xff1a;光标定位到行右&#xff1a; ^&#xff1a;光标定位到左&#xff1a; shiftgG&#xff1a;光标定位到底部 gg&#xff1a;回到顶部 nshiftg表示跳转光标到第n行 文本复制相关…

输入学生的信息学号、姓名、语文成绩、数学成绩、英语成绩,计算总分、并按总分成绩排序,再写到另一个txt文件中(python)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 题目&#xff1a; 代码&#xff1a; 1.提前写入标题栏&#xff08;学号、姓名、语文、数学、英语、总分&#xff09; 2.再写入学生的信息 3.读取score2.txt文件 4.…

机器学习西瓜书学习记录-第五章 神经网络

第5章 神经网络 5.1神经元模型 神经网络中最基本的成分是神经元模型。 “M-P神经元模型”&#xff0c;又称“阈值逻辑单元” 在模型中&#xff0c;神经元接收到来自n个其他神经元传递过来的输入信号&#xff0c;这些输入信号通过带权重的连接进行传递&#xff0c;神经元接收到…

分分钟让你学会栈和队列

数据结构——栈和队列 &#x1f3d6;️专题&#xff1a;数据结构 &#x1f648;作者&#xff1a;暴躁小程序猿 ⛺简介&#xff1a;双非本科大二小菜鸟一枚&#xff0c;希望我的博客可以对大家有所帮助 文章目录数据结构——栈和队列前言一、什么是栈&#xff1f;二、栈的相关概…

计算机毕设(附源码)JAVA-SSM蓟县农家乐网站

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

算法竞赛进阶指南 搜索 0x26 广搜变形

双端队列BFS 在最基本的广度优先搜索中&#xff0c;每次沿着分支的扩展都记为“一步”&#xff0c;我们通过逐层搜索&#xff0c;解决了求从起始状态到每个状态的最少步数的问题。这其实等价于在一张边权均为1的图上执行广度优先遍历&#xff0c;求出每个点相对于起点的最短距…

程序员的数学好难学?一切从基础开始!

数学知识对编程很有用&#xff0c;但是很多写给程序员的数学书都比较难。我们为什么不从基础的数学知识开始学习呢&#xff1f; 程序员的数学基础 Python实战 1.本书的重点不在于如何解题&#xff0c;而在于帮助读者在计算机世界里如何利用数学解决算法问题&#xff0c;让程序…

WinForm应用实战开发指南 - 教你如何实现表头的全选操作?

WinForms分页控件&#xff0c;在很多场合都需要用到&#xff0c;由于整合较多的功能操作&#xff0c;使用起来效果更好&#xff0c;界面统一性也比较一致。其中的勾选操作&#xff0c;在有些场合下&#xff0c;也是比较有用的&#xff0c;因此提供该功能的整合。 PS&#xff1…