当前位置：首页 > news >正文

js,html,css,vuejs手搓级联单选

news 来源：原创 2025/8/10 21:35:06

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>级联选择器</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>* {margin: 0;padding: 0;box-sizing: border-box;}#app {height: 700px;}.cascader-container {position: relative;display: inline-block;}.cascader-input {width: 250px;padding: 8px;border: 1px solid #ccc;border-radius: 4px;cursor: pointer;}.dropdown {position: absolute;top: 40px;left: 0;display: flex;border: 1px solid #ddd;background: white;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.column {width: 150px;border-right: 1px solid #eee;}.column:last-child {border-right: none;}ul {list-style: none;padding: 5px;}li {display: flex;align-items: center;padding: 5px;cursor: pointer;}li:hover {background: #f5f5f5;}input[type="radio"] {margin-right: 8px;}.selected {color: #409eff;font-weight: bold;}.arrow {margin-left: auto;}</style></head><body><div id="app" @click="hideDropdown"><div class="cascader-container" @click.stop><inputclass="cascader-input":value="selectedPath"readonly@click="toggleDropdown"/><div v-if="dropdownVisible" class="dropdown" @click.stop><divv-for="(items, level) in visibleData":key="level"class="column"><ul><liv-for="item in items":key="item.value"@click.stop="toggleExpand(item, level)"><inputtype="radio"name="cascader":value="item.value"v-model="selectedValue"@click.stop="selectItem(item)"/><span :class="{ selected: selectedValue === item.value }">{{ item.label }}</span><span v-if="item.children" class="arrow">></span></li></ul></div></div></div></div><script>new Vue({el: "#app",data: {dropdownVisible: false,selectedValue: "",selectedPath: "请选择",options: [{value: "zhinan",label: "指南",children: [{value: "shejiyuanze",label: "设计原则",children: [{value: "yizhi",label: "一致",},{value: "fankui",label: "反馈",},{value: "xiaolv",label: "效率",},{value: "kekong",label: "可控",},],},{value: "daohang",label: "导航",children: [{value: "cexiangdaohang",label: "侧向导航",},{value: "dingbudaohang",label: "顶部导航",},],},],},{value: "zujian",label: "组件",children: [{value: "basic",label: "Basic",children: [{value: "layout",label: "Layout 布局",},{value: "color",label: "Color 色彩",},{value: "typography",label: "Typography 字体",},{value: "icon",label: "Icon 图标",},{value: "button",label: "Button 按钮",},],},{value: "form",label: "Form",children: [{value: "radio",label: "Radio 单选框",},{value: "checkbox",label: "Checkbox 多选框",},{value: "input",label: "Input 输入框",},{value: "input-number",label: "InputNumber 计数器",},{value: "select",label: "Select 选择器",},{value: "cascader",label: "Cascader 级联选择器",},{value: "switch",label: "Switch 开关",},{value: "slider",label: "Slider 滑块",},{value: "time-picker",label: "TimePicker 时间选择器",},{value: "date-picker",label: "DatePicker 日期选择器",},{value: "datetime-picker",label: "DateTimePicker 日期时间选择器",},{value: "upload",label: "Upload 上传",},{value: "rate",label: "Rate 评分",},{value: "form",label: "Form 表单",},],},{value: "data",label: "Data",children: [{value: "table",label: "Table 表格",},{value: "tag",label: "Tag 标签",},{value: "progress",label: "Progress 进度条",},{value: "tree",label: "Tree 树形控件",},{value: "pagination",label: "Pagination 分页",},{value: "badge",label: "Badge 标记",},],},{value: "notice",label: "Notice",children: [{value: "alert",label: "Alert 警告",},{value: "loading",label: "Loading 加载",},{value: "message",label: "Message 消息提示",},{value: "message-box",label: "MessageBox 弹框",},{value: "notification",label: "Notification 通知",},],},{value: "navigation",label: "Navigation",children: [{value: "menu",label: "NavMenu 导航菜单",},{value: "tabs",label: "Tabs 标签页",},{value: "breadcrumb",label: "Breadcrumb 面包屑",},{value: "dropdown",label: "Dropdown 下拉菜单",},{value: "steps",label: "Steps 步骤条",},],},{value: "others",label: "Others",children: [{value: "dialog",label: "Dialog 对话框",},{value: "tooltip",label: "Tooltip 文字提示",},{value: "popover",label: "Popover 弹出框",},{value: "card",label: "Card 卡片",},{value: "carousel",label: "Carousel 走马灯",},{value: "collapse",label: "Collapse 折叠面板",},],},],},{value: "ziyuan",label: "资源",children: [{value: "axure",label: "Axure Components",},{value: "sketch",label: "Sketch Templates",},{value: "jiaohu",label: "组件交互文档",},],},],expandedNodes: [],},computed: {visibleData() {let levels = [];let currentLevel = this.options;levels.push(currentLevel);for (let i = 0; i < this.expandedNodes.length; i++) {let found = currentLevel.find((node) => node.value === this.expandedNodes[i]);if (found && found.children) {levels.push(found.children);currentLevel = found.children;} else {break;}}return levels;},},methods: {toggleDropdown() {this.dropdownVisible = !this.dropdownVisible;},hideDropdown() {this.dropdownVisible = false;},toggleExpand(item, level) {this.expandedNodes = this.expandedNodes.slice(0, level);if (item.children) {this.expandedNodes.push(item.value);}},selectItem(item) {this.selectedValue = item.value;this.selectedPath = this.getFullPath(item.value, this.options, "");this.dropdownVisible = false;console.log("this.selectedValue", this.selectedValue);console.log("this.selectedPath", this.selectedPath);},getFullPath(value, options, path) {for (let opt of options) {let newPath = path ? `${path} / ${opt.label}` : opt.label;if (opt.value === value) return newPath;if (opt.children) {let result = this.getFullPath(value, opt.children, newPath);if (result) return result;}}return "";},},});</script></body>
</html>

js,html,css,vuejs手搓级联单选

<!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>级联选择器</title><script src"h…...

编程日记 2025/8/10 21:35:06

将Django连接到mysql

将Django连接到mysql 文章目录将Django连接到mysql一.按照我的文章在Django模型中的Mysql安装此篇的步骤完成mysql的基础配置二.Django配置一.按照我的文章 ‘在Django模型中的Mysql安装’ 此篇的步骤完成mysql的基础配置基础配置具体内容 1.打开PowerShell 安装mysql的…...

编程日记 2025/8/5 12:26:28

每天五分钟深度学习框架pytorch:基于pytorch搭建循环神经网络RNN

本文重点我们前面介绍了循环神经网络RNN,主要分析了它的维度信息，其实它的维度信息是最重要的，一旦我们把维度弄清楚了，一起就很简单了，本文我们正式的来学习一下，如何使用pytorch搭建循环神经网络RNN。 RNN的搭建在pytorch中我们使用nn.RNN()就可以创建出RNN神经网络…...

编程日记 2025/8/5 22:13:48

【力扣刷题实战】无重复的最长字串

大家好，我是小卡皮巴拉文章目录目录力扣题目： 无重复的最长字串题目描述解题思路问题理解算法选择具体思路解题要点完整代码（C） 兄弟们共勉 ！！！ 每篇前言博客主页&#x…...

编程日记 2025/8/9 19:45:37

vulhub/joker 靶机----练习攻略

1. 靶机下载地址 https://download.vulnhub.com/ha/joker.zip 下载下来是ova文件，直接双击，在VMware打开，选择保存位置，点击导入。 2. 设置网卡模式为NAT，打开靶机 3.老规矩，打开kali，扫同C…...

编程日记 2025/8/8 11:17:46

Nuxt2 vue 给特定的页面 body 设置 background 不影响其他页面

首先认识一下 BODY_ATTRS 他可以在页面单独设置 head () {return {bodyAttrs: {form: form-body}};},设置完效果是只有这个页面会加上接下来在APP.vue中添加样式...

编程日记 2025/8/10 11:48:14

【Go】运算符笔记

基本数学运算 Go 语言支持常见的算术运算符，用于执行数学计算。运算符说明加法-减法*乘法/除法%取余自增--自减整数运算只能得到整数部分 package mainimport ("fmt""math" )func main() {go_math() }func go_math() {x, y : 8, 5fmt.Pr…...

编程日记 2025/8/6 4:58:59

常见的前端安全问题

前端安全是 Web 开发中至关重要的一环，以下是常见的前端安全问题及对应的防御措施： 1. XSS（跨站脚本攻击） 攻击原理攻击者向页面注入恶意脚本（如 JavaScript），在用户浏览器中执行，…...

编程日记 2025/8/7 15:07:25

基于Spring Boot的项目申报系统的设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2025/8/7 5:33:34

SPI驱动(九) -- SPI_Master驱动程序

文章目录参考资料：一、SPI传输概述二、SPI传输的两种方法2.1 旧方法2.2 新方法参考资料： 参考资料： 参考内核源码: drivers\spi\spi.c 一、SPI传输概述 SPI控制器的作用是发起与它下面挂接的SPI设备之间的数据传输，那么控制…...

编程日记 2025/8/9 1:31:57

Transformer网络发展概述2025.3.18

一.Transformer概述 1.1 定义与原理 Transformer是一种基于自注意力机制的深度学习模型，在处理序列数据时表现卓越。其核心原理包括： 自注意力机制 ：允许模型同时考虑输入序列中的所有位置，捕捉语义关系多头注意力 &#xff1a…...

编程日记 2025/8/10 1:03:57

3.4 二分查找专题：LeetCode 69. x 的平方根

1. 题目链接 LeetCode 69. x 的平方根 2. 题目描述给定一个非负整数 x，计算并返回 x 的平方根的整数部分（向下取整）。示例： 输入：x 4 → 输出：2输入：x 8 → 输出：2&#xff0…...

编程日记 2025/8/5 23:09:58

机器人曲面跟踪Surface-Tracking

定义机器人曲面跟踪（Surface-Tracking）是指机器人通过实时感知工件曲面的三维形貌，动态调整运动轨迹和位姿，以精确跟随曲面进行加工（如打磨、抛光、喷涂等）的技术。力 - 位姿协同控制力控模式&#xff…...

编程日记 2025/8/7 21:47:06

openv版本: opencv249 vs ：2010 qt : 4.85 #include "quanjing.h"#include <iostream> #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <open…...

编程日记 2025/8/8 4:25:31

深入解析ES6+新语法：复杂的迭代器与生成器

一、迭代器（Iterator）：数据遍历的统一协议 1. 迭代器协议的本质 **迭代器协议（Iterator Protocol）** 是一种标准化的数据访问接口，它要求对象实现一个 next() 方法，每次调用返回包含 { valu…...

编程日记 2025/8/6 13:35:31

【C语言】自定义类型：结构体

一、结构体类型的声明我们前面学习操作符的时候已经接触过结构体了，下面我们回顾一下结构体的基本内容。创建结构体的语法如上所示： struct是创建结构体的关键字，然后tag就是我们结构体的名称，member-list是结构体的成员列表&…...

编程日记 2025/8/6 4:56:42

微服务即时通信系统---（五）框架学习

目录 ODB 介绍安装 build2安装 odb-compiler安装 ODB运行时库安装 mysql和客户端开发包安装 boost profile库安装总体打包安装总体卸载总体升级头文件包含和编译时指明库 ODB常见操作介绍类型映射 ODB编程类与接口介绍 mysql连接池对象类 mysql客户端…...

编程日记 2025/8/8 14:00:11

蓝桥杯练习day1：自除数

前言自除数是指可以被它包含的每一位数整除的数。例如，128 是一个自除数 ，因为 128 % 1 0，128 % 2 0，128 % 8 0。自除数不允许包含 0 。给定两个整数 left 和 right ，返回一个列表，列表的元素…...

编程日记 2025/8/7 20:17:08

0基础 | 上下拉电阻典型应用场景

三极管典型运用： 上拉电阻下拉电阻限流电阻此处开关为三极管左侧电阻：驱动电阻【限流电阻】 （控制mos管） 下面电阻：下拉电阻【关断电阻】 %%作用1： （因为IO口输出信号分为低电平&…...

编程日记 2025/8/5 10:06:39

MySQL数据高效同步到Elasticsearch的四大方案

目录引言一、为什么需要MySQL到ES的同步？ 二、四大同步方案对比三、方案详解与代码实战 1. 应用层双写：简单但强耦合 2. 定时任务同步：可控的准实时 3. Logstash JDBC：离线迁移利器 4. Binlog监听：生产级实…...

编程日记 2025/8/10 20:55:36

Docker详解

云是一种服务理念。在云里docker是业务的最小载体 doker是管理容器的引擎，为应用打包、部署平台、而非单纯的虚拟化技术 1.轻量级虚拟化 2.一致性 4.高效的资源利用 5.易于部署和扩展 docker和虚拟机的区别： 虚拟机：真机需要一个操作系…...

编程日记 2025/8/8 7:36:51

清晰易懂的Maven安装教程（含自定义依赖包位置）

初学者也能看懂的 Maven 安装教程（含自定义依赖包位置） Maven 是一个强大的项目管理和构建工具，广泛用于 Java 项目的依赖管理和构建自动化。本教程将手把手教你如何在 Windows 系统上安装 Maven，并配置环境变量，同时…...

编程日记 2025/8/9 15:08:53

王道数据结构6.3

顶点x的第一个邻接点以及下一个邻接点 int first_neighbor(Algraph G, int x){if(G.vertices[x].firstarc! nullptr){return G.vertices[x].firstarc->adjvex;}else return -1; }int next_neighbor(Algraph G,int x,int y){ArcNode *pG.vertices[x].firstarc;while(p! null…...

编程日记 2025/8/9 21:55:53

【Linux操作系统——学习笔记二】Linux简单导航命令操作

一、前言学习Linux，本质上是学习在命令行下熟练使用Linux的各类命令。命令行：是一种通过输入命令和参数与计算机系统进行交互的方式，可以使用各种字符化命令对系统发出操作指令，打开Linux终端，进入命令行界面。 …...

编程日记 2025/8/5 21:45:01

贪心算法——c#

贪心算法通俗解释贪心算法是一种"每一步都选择当前最优解"的算法策略。它不关心全局是否最优，而是通过局部最优的累积来逼近最终解。优点是简单高效，缺点是可能无法得到全局最优解。一句话秒懂自动售货机找零钱：用最少数量的…...

编程日记 2025/7/28 8:08:24

SPI 总线协议

1、协议介绍 SPI，是英语 Serial Peripheral interface 的缩写，顾名思义就是串行外围设备接口。是 Motorola 首先在其 MC68HCXX 系列处理器上定义的。 SPI，是一种高速的，全双工，同步的通信总线。主节点或子节点的数据在…...

编程日记 2025/8/9 20:17:05

单片机开发资源分析的实战——以STM32G431RBT6为例子的单片机资源分析

目录第一点：为什么叫STM32G431RBT6 从资源手册拿到我们的对STM32G431RBT6的资源描述第二件事情，关心我们的GPIO引脚输出第三件事情：去找对应外设的说明部分第一点：为什么叫STM32G431RBT6 对于命名规则不太熟悉的朋友看这里…...

编程日记 2025/8/5 14:49:02

物联网（IoT）架构中，平台层的应用与技术

在物联网（IoT）架构中，平台层是连接物理设备（感知层）和应用服务（应用层）的核心部分。它负责数据的采集、处理、存储、分析以及设备管理等功能，是物联网系统的“大脑”。以下是平台层的主要功能及其技术实现手段：平台层的主要功能设备管理：功能：管理物联网设备的注…...

编程日记 2025/8/6 15:11:06

大语言模型的压缩技术

尽管人们对越来越大的语言模型一直很感兴趣，但MistralAI 向我们表明，规模只是相对而言的，而对边缘计算日益增长的兴趣促使我们使用小型语言获得不错的结果。压缩技术提供了一种替代方法。在本文中，我将解释这些技术，并…...

编程日记 2025/8/8 8:01:36

JVM 2015/3/15

定义：Java Virtual Machine -java程序的运行环境（java二进制字节码的运行环境） 好处： 一次编写，到处运行自动内存管理，垃圾回收数组下标越界检测多态比较：jvm/jre/jdk 常见的JVM&…...

编程日记 2025/8/10 18:25:45

DeepSeek辅助学术写作中期能力及提示词分享

目录确立三论收集资料选取论据展开论证大家好这里是AIWritePaper官方账号！更多内容👉AIWritePaper~在如今这个学术圈的“快车道”上，时间就像是一场永不停歇的赛跑，而论文质量则是那颗我们拼命追逐的“金苹果”。最近一款…...

编程日记 2025/8/10 4:54:54

Git 实战指南：本地客户端连接 Gitee 全流程

本文将以 Gitee（码云）、系统Windows 11 为例，详细介绍从本地仓库初始化到远程协作的全流程操作目录 1. 前期准备1.1 注册与配置 Gitee1.2 下载、安装、配置客户端1.3 配置公钥到 Gitee2. 本地仓库操作（PowerShell/Git Bash）2.1 初始化本地仓库2.2 关联 Gitee 远程仓库3. …...

编程日记 2025/8/5 18:48:01

汇编基础知识

机器语言 1、机器语言是机器指令的集合，机器指令就是机器可以正确执行的命令，由二进制数组成 2、当今我们常用的是pc机，由一个芯片完成上述功能，即CPU是一种微处理器，每一种微处理器由于自身硬件设计和内部构造不同都…...

编程日记 2025/8/9 14:55:45

线程池的拒绝策略适用场景思考

ThreadPoolExecutor有四种拒绝策略。刚开始学习线程池的时候我就觉得，就是应该当任务饱和（达到拒绝策略）时，就应该拒绝任务，抛出异常。最近仔细思考了下，既然线程池这么设计，也应该有一定的道理…...

编程日记 2025/8/8 12:24:08

on-policy对比off-policy

目录持续更新。。。 on-policy与off-policy的定义 Q-learning属于on-policy算法还是off-policy算法？ 为什么off-policy适用于从离线经验或多种探索策略中学习，明明 On-policy 也可以基于探索学习的啊？ 重要性权重方法 off-policy方法可…...

编程日记 2025/7/31 15:42:29

如何记录Matlab程序运行过程中所占用的最大内存（续）

在上一篇博客中，我们讨论了如何记录Matlab程序运行过程中所占用的最大内存。博客原文：如何记录Matlab程序运行过程中所占用的最大内存-CSDN博客但经过测试发现，这与实际有非常大的差异。运行如下例子： clear;clc; profile on…...

编程日记 2025/8/9 1:21:33

解决MySQL字符集冲突引发的“Illegal mix of collations”错误

引言在开发过程中，我们常常会遇到数据库层面的字符集兼容性问题。本文将通过一个典型的案例，分析因字符集不匹配导致的 Illegal mix of collations 错误，并提供完整的解决方案，帮助开发者彻底规避此类问题。问题现象假设我们…...

编程日记 2025/8/9 17:25:56

Vue3：F12后，页面弹出runtime errors及提示的解决办法

解决： vue.config.jsdevServer: {client: {overlay: false}, },关闭提示 main.js // 定义特性标志 window.__VUE_PROD_DEVTOOLS__ false window.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ false...

编程日记 2025/6/28 3:27:31

学习笔记：黑马程序员JavaWeb开发教程(2025.3.17)

11.5 案例-文件上传-阿里云OSS-入门出现报错：Process exited with an error: 1 (Exit value: 1)，点击exec那一行，出现错误原因：Command execution failed. 在CSDN上找到了解决方法： 之后出现新的报错&…...

编程日记 2025/8/1 21:39:31

EDAS：投稿经验-word版本-问题解决

1. 字体不对，字体未嵌入问题问题：word转PDF后，总是显示有字体格式不对（忘记截图了）。办法：1. EDAS投稿PDF格式问题-CSDN博客-PDF上修改 IEEE论文检测的字体未嵌入问题Times New Ro…...

编程日记 2025/8/6 7:30:48

【数据结构初阶第十九节】八大排序系列(下篇)—[详细动态图解+代码解析]

hello，好久不见！ 云边有个稻草人-CSDN博客上篇内容，回顾一下吧【数据结构初阶第十八节】八大排序系列(上篇)—[详细动态图解代码解析]-CSDN博客今天我们来学习下篇目录 （2）快速排序【挖坑法】 —思路 —思路…...

编程日记 2025/8/5 13:13:27

不可不知的分布式数据库-TiDB

不可不知的分布式数据库-TiDB 介绍TiDb架构TiDb与Mysql的区别功能特性性能表现数据可靠性运维管理成本 Docker部署TiDB1. 获取 TiDB 配置文件2. 启动 TiDB 集群3. 连接到 TiDB4. 停止和清理 TiDB 集群注意事项实用案例TiDB实现分布式事务实现原理实现方式SQL 方式编程方式注意…...

编程日记 2025/8/7 6:30:25

BUUCTF Pwn babyheap_0ctf_2017 Unsorted bin attack部分

checksec exeinfo 开启了全保护 64位查看函数： 堆题增删查改齐了可以在编辑堆的时候重新设置大小存在堆溢出 delete函数的指针清零了无UAF 想法是通过unsorted bin泄露libc基址： from pwn import *p process(./babyheap) #p remote("node…...

编程日记 2025/8/8 19:10:26

AI绘画软件Stable Diffusion详解教程（11）：图生图进阶篇（局部用上传蒙版重绘）

总的功能与上一篇相似，但是在Stable Diffusion网页上手工涂绘的方法，有可能会因不够精细，导致重绘的效果不佳，涂绘区与非涂绘区的衔接有可能会出问题。这个时候可以用photoshop来制作蒙版，精确的圈出需要重绘的地方&am…...

编程日记 2025/8/7 1:47:49

SAP的WPS导出找不到路径怎么办；上载报错怎么办

一.打开注册编辑器二.输入以下地址计算机\HKEY_CLASSES_ROOT\ExcelWorksheet\Protocol\StdFileEditing\Server 去除掉EXE后面的命令即可二：WPS上载文件没反应怎么办如何切换整合模式或多组件模式-WPS学堂根据官方操作把整合模式改成多组件模式...

编程日记 2025/6/28 5:47:04

Go语言不定长参数使用详解

不定长参数（Variadic Parameters）使用详解核心概念语法特性：...T 表示函数可接受任意数量的T类型参数底层实现：不定长参数在函数内部实际存储为切片类型 []T展开操作符：调用时使用 slice... 可将切片展开为独立参数…...

编程日记 2025/8/5 19:42:11

django如何配置使用asgi

以下是 Django 配置使用 ASGI 的完整指南： 一、配置前提 Django 版本：确保使用 Django 3.0（原生支持 ASGI）必要依赖：pip install daphne channels二、基础配置步骤 1. 创建/修改 ASGI 入口文件在 Django 项目根目录…...

编程日记 2025/8/8 21:34:23

在C语言基础上学Java【Java】【一】

众所周知，Java是C风格的语言，对于学过C语言的人学Java可以快速适应。废话不多说，直接边看代码边学。数据类型，输入和输出 public class a1 {//a1是类名，就是文件名，所有的可执行代码需要写在这个里面 /…...

编程日记 2025/8/6 4:27:58

使用 Promise 和 .then() 解决同异步问题

在购物车功能中，用户点击“加入购物车”或“删除购物车”时，可能会遇到数据同步问题。例如，当用户快速连续点击“删除”按钮时，可能会导致删除操作基于过时的数据，从而引发错误。为了解决这个问题，我们可以…...

编程日记 2025/8/4 21:05:14

defineExpose函数

在软件开发中，特别是在像 Vue.js 这样的框架中，defineExpose 是一个函数，用于显式地将组件的某些属性或方法暴露给其父组件或其他组件。这在你想控制组件的内部状态或功能对外部可见性时非常有用。 Vue.js 3 中的示例： <scri…...

编程日记 2025/8/9 21:57:45

相关文章：