级联选择框

文章目录

  • 实现级联选择框
    • 效果图
    • 实现
      • 前端
        • 工具版本
        • 添加依赖
        • main.js导入依赖
        • 级联选择框样式
      • 后端
        • 数据库设计

实现级联选择框

效果图

在这里插入图片描述

实现

前端

工具版本

  • node.js v16.6.0
  • vue3

级联选择框使用 Element-Plus 实现

添加依赖

在 package.json 添加依赖,并 npm i 导入

"element-plus": "^1.1.0-beta.15",

main.js导入依赖

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'; // 使用 createApp 替换 Vue 的导入方式
import App from './App.vue';... const app = createApp(App); // 使用 createApp 创建 Vue 应用
app.use(ElementPlus)
app.mount('#app'); // 挂载 Vue 应用到 DOM 节点

级联选择框样式

<template><div><el-cascaderv-model="value":options="options"@change="handleChange"collapse-tags-tooltip="true":props="props"expandTrigger="hover"/>	</div>
</template>
<script setup>// 级联选择框
const props = {expandTrigger: 'hover' 
}
const handleChange = (value) => {let jobId = value[value.length - 1]let condition = {pageNo: page.value,pageSize: size.value,param: {jobId: jobId}}getListDataByCondition(condition)
}
// 获取级联筛选框数据,如果后端的话,使用后端数据替换 options 即可
const options = [{value: 'guide',label: 'Guide',children: [{value: 'disciplines',label: 'Disciplines',children: [{value: 'consistency',label: 'Consistency',},{value: 'feedback',label: 'Feedback',},{value: 'efficiency',label: 'Efficiency',},{value: 'controllability',label: 'Controllability',},],},],},{value: 'python',label: 'python',children: [{value: 'disciplines',label: 'Disciplines',children: [{value: 'consistency',label: 'Consistency',},{value: 'feedback',label: 'Feedback',},{value: 'efficiency',label: 'Efficiency',},{value: 'controllability',label: 'Controllability',},],},]}
]
</script>

options 即为级联选择框展示的数据,后端返回对应数据即可,如下

{label: '...',value: '...',childred: [{}]
}

后端

数据库设计

假设数据库表名为 career

则字段为:

id、name、parent_id

我们设计最顶层的条件的 parent_id 为 null,后端使用递归查出即可

这里只列出 Service 层相关方法:

这里使用了 JSONArray,引入 fastjson 依赖即可。

<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.75</version>
</dependency>
@Override
public JSONArray getData() {QueryWrapper<Career> qw = new QueryWrapper<>();// 查出 career 表中所有数据List<Career> careers = careerMapper.selectList(qw);// 进行递归解析JSONArray result = resolve(careers, null);return result;
}public JSONArray resolve(List<Career> careers, Integer parentId) {JSONArray curResult = new JSONArray();for (Career career : careers) {JSONObject obj = new JSONObject();obj.put("value", career.getId());obj.put("label", career.getName());// 根节点if (career.getParentId() == null && parentId == null) {JSONArray children = resolve(careers, career.getId());if (children != null && children.size() > 0) {obj.put("children", children);}curResult.add(obj);} else if (career.getParentId() != null && parentId != null && career.getParentId().equals(parentId)){JSONArray children = resolve(careers, career.getId());if (children != null && children.size() > 0) {obj.put("children", children);}curResult.add(obj);}}return curResult;
}

数据库模拟数据如下:

id: 1, name: "软件开发", "parent_id": null
id: 2, name: "后端开发", "parent_id": 1
id: 3, name: "前端开发", "parent_id": 2
id: 4, name: "Java开发", "parent_id": 2
id: 5, name: "Go开发", "parent_id": 2
id: 6, name: "Vue", "parent_id": 3

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

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

相关文章

Web安全基础

1、HTML基础 什么是 HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言&#xff0c;而是一种标记语言 (Markup language) 标记语言是一套标记标签 (Markup tag) HTML 使用标记标签来描述网页 总的来说&…

Ubuntu中关闭防火墙

在Ubuntu中关闭防火墙可以通过以下步骤进行&#xff1a; 查看防火墙状态&#xff1a; sudo ufw status如果防火墙状态为active&#xff08;活动状态&#xff09;&#xff0c;则执行以下命令来停用防火墙&#xff1a; sudo ufw disable输入以下命令确认是否停用防火墙&#x…

【Rust 基础篇】Rust可变静态变量:全局状态的可变性管理

导言 Rust是一种以安全性和高效性著称的系统级编程语言&#xff0c;其设计哲学是在不损失性能的前提下&#xff0c;保障代码的内存安全和线程安全。为了实现这一目标&#xff0c;Rust引入了"所有权系统"、"借用检查器"等特性&#xff0c;有效地避免了常见…

Flink之Kafka Sink

代码内容 package com.jin.demo;import org.apache.flink.api.common.serialization.SimpleStringSchema; import org.apache.flink.connector.base.DeliveryGuarantee; import org.apache.flink.connector.kafka.sink.KafkaRecordSerializationSchema; import org.apache.fli…

【LeetCode】28. 找出字符串中第一个匹配项的下标

题目&#xff1a; 28. 找出字符串中第一个匹配项的下标 这道题一看就是经典的KMP算法求解字符串模式匹配问题。 但这里我用了java里自带的字符串匹配函数 indexOf(),虽然有点偷懒&#xff0c;但运行结果还不错。主要是怕有时候竞赛会突然忘了一些算法&#xff0c;不过有时候多…

[数据集][目标检测]天牛数据集目标检测数据集VOC格式3050张

数据集格式&#xff1a;Pascal VOC格式(不包含分割路径的txt文件和yolo格式的txt文件&#xff0c;仅仅包含jpg图片和对应的xml) 图片数量(jpg文件个数)&#xff1a;3050 标注数量(xml文件个数)&#xff1a;3050 标注类别数&#xff1a;1 标注类别名称:["longicorn"] …

Tomcat中利用war包部署

在Tomcat中利用war包部署Web应用程序时&#xff0c;默认情况下&#xff0c;应用程序的上下文路径&#xff08;也称为项目名称&#xff09;将是war文件的名称&#xff08;去除.war扩展名&#xff09;。这意味着您在访问Web应用程序时必须在URL中包含项目名称。例如&#xff0c;如…

Minio在windows环境配置https访问

minio启动后&#xff0c;默认访问方式为http&#xff0c;但是有的时候我们的访问场景必须是https&#xff0c;浏览器有的会默认以https进行访问&#xff0c;这个时候就需要我们进行配置上的调整&#xff0c;将minio从http访问升级到https。而查看minio的官方文档&#xff0c;并…

【Spring Cloud Alibaba】限流--Sentinel

文章目录 概述一、Sentinel 是啥&#xff1f;二、Sentinel 的生态环境三、Sentinel 核心概念3.1、资源3.2、规则 四、Sentinel 限流4.1、单机限流4.1.1、引入依赖4.1.2、定义限流规则4.1.3、定义限流资源4.1.4、运行结果 4.2、控制台限流4.2.1、客户端接入控制台4.2.2、引入依赖…

【Qt】QML-02:QQuickView用法

1、先看demo QtCreator自动生成的工程是使用QQmlApplicationEngine来加载qml文件&#xff0c;下面的demo将使用QQuickView来加载qml文件 #include <QGuiApplication> #include <QtQuick/QQuickView>int main(int argc, char *argv[]) {QGuiApplication app(argc,…

layui各种事件无效(例如表格重载或 分页插件按钮失效)的解决方法

下图是我一个系统的操作日志&#xff0c;在分页插件右下角嵌入了一个导出所有数据的按钮 &#xff0c;代码没有任何问题&#xff0c;点击导出按钮却失效 排查之后&#xff0c;发现表格标签table定义了ID又定义了lay-filter&#xff0c;因我使用的layui从2.7.6升级到2.8.11&…

JavaScript高级——ES6基础入门

目录 前言let 和 const块级作用域模板字符串一.模板字符串是什么二.模板字符串的注意事项三. 模板字符串的应用 箭头函数一.箭头函数是什么二.普通函数与箭头函数的转换三.this指向1. 全局作用域中的 this 指向2. 一般函数&#xff08;非箭头函数&#xff09;中的this指向3.箭头…

SSL 证书过期巡检脚本

哈喽大家好&#xff0c;我是咸鱼 我们知道 SSL 证书是会过期的&#xff0c;一旦过期之后需要重新申请。如果没有及时更换证书的话&#xff0c;就有可能导致网站出问题&#xff0c;给公司业务带来一定的影响 所以说我们要每隔一定时间去检查网站上的 SSL 证书是否过期 如果公…

Flutter - 微信朋友圈、十字滑动效果(微博/抖音个人中心效果)

demo 地址: https://github.com/iotjin/jh_flutter_demo 代码不定时更新&#xff0c;请前往github查看最新代码 前言 一般APP都有类似微博/抖音个人中心的效果&#xff0c;支持上下拉刷新&#xff0c;并且顶部有个图片可以下拉放大&#xff0c;图片底部是几个tab&#xff0c;可…

C# IO 相关功能整合

目录 删除文件和删除文件夹 拷贝文件到另一个目录 保存Json文件和读取Json文件 写入和读取TXT文件 打开一个弹框&#xff0c;选择 文件/文件夹&#xff0c;并获取路径 获取项目的Debug目录路径 获取一个目录下的所有文件集合 获取文件全路径、目录、扩展名、文件名称 …

WPF实现DiagramChart

1、文件架构 2、FlowChartStencils.xaml <ResourceDictionary xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:s"clr-namespace:DiagramDesigner"xmlns:c&…

了解Unity编辑器之组件篇Miscellaneous(九)

一、Aim Constraint&#xff1a;是一种动画约束&#xff0c;用于使一个对象朝向另一个对象或一个指定的矢量方向 Activate按钮&#xff1a;用于激活或停用Aim Constraint。当Aim Constraint处于激活状态时&#xff0c;其约束效果将应用于目标对象。 Zero按钮&#xff1a;用于将…

Zabbix监控ActiveMQ

当我们在线上使用了ActiveMQ 后&#xff0c;我们需要对一些参数进行监控&#xff0c;比如 消息是否有阻塞&#xff0c;哪个消息队列阻塞了&#xff0c;总的消息数是多少等等。下面我们就通过 Zabbix 结合 Python 脚本来实现对 ActiveMQ的监控。 一、创建 Activemq Python 监控…

39. Linux系统下在Qt5.9.9中搭建Android开发环境

1. 说明 QT版本:5.9.9 电脑系统:Linux JDK版本:openjdk-8-jdk SDK版本:r24.4.1 NDK版本:android-ndk-r14b 效果展示: 2. 具体步骤 大致安装的步骤如下:①安装Qt5.9.9,②安装jdk,③安装ndk,④安装sdk,⑤在qt中配置前面安装的环境路径 2.1 安装Qt5.9.9 首先下载…

PHP8的数据类型-PHP8知识详解

在PHP8中&#xff0c;变量不需要事先声明&#xff0c;赋值即声明。 不同的数据类型其实就是所储存数据的不同种类。在PHP8.0、8.1中都有所增加。以下是PHP8的15种数据类型&#xff1a; 1、字符串&#xff08;String&#xff09;&#xff1a;用于存储文本数据&#xff0c;可以使…