uniapp使用uview UI，自定义级联选择组件

一、需求：

1.省市区级联选择，可多选
2.可以一键选择某个区域下的所有数据
3.点击省展开市，点击市展开区，以此类推(可返回上一层或多层)
4.只获取选择的人

效果视频

二、注意事项以及源码

1.需要安装uView UI组件库，安装地址uView UI官网

2.源码，复制即用

<template><view class="container"><!-- 层级导航 --><view class="breadcrumb"><text class="breadcrumb-item" v-for="(item, index) in breadcrumbList" :key="index" @click="goBackToLevel(index)":class="{ 'breadcrumb-item-active': index === breadcrumbList.length - 1 }">{{ item }}<text v-if="index !== breadcrumbList.length - 1" class="breadcrumb-separator"> ></text></text></view><!-- 层级内容 --><view class="level-content"><view class="level-item" v-for="(item, index) in currentLevelData" :key="item.id"><!-- 将点击事件移到内部元素，避免与复选框冲突 --><view class="level-item-left" @click="handleLevelItemClick(item)"><view class="level-icon" :style="{ backgroundColor: getLevelColor(item) }"><text class="level-icon-text">{{ getLevelCode(item) }}</text></view><view class="level-info"><text class="level-title">{{ item.name }}</text><text class="level-desc">{{ item.leaf ? item.emergencyPersonnel.phone : `${getAllLeafCount(item)} 个人员` }}</text></view></view><view class="select-checkbox"><u-checkbox :checked="isNodeSelected(item)" :indeterminate="isNodeIndeterminate(item)"@change="(value) => handleNodeSelect(item, value)" shape="circle" active-color="#4F46E5"></u-checkbox></view></view></view><!-- 底部操作栏 --><view class="footer-bar"><view class="selected-info"><u-icon name="account-fill" size="30" color="#4F46E5"></u-icon><text class="selected-count">已选择 {{ selectedPersons.length }} 人</text></view><u-button type="primary" @click="toFormPage" :disabled="selectedPersons.length === 0"class="next-button">下一步</u-button></view></view>
</template><script>
export default {data() {return {// 人员数据结构（修改后：新增省份、简化字段、常见姓名）personnelData: [{"id": "510000","name": "四川省","children": [{"id": "511400","name": "眉山市","children": [{"id": "市管理员","name": "市管理员","children": [{"id": "10","name": "赵六","children": [],"emergencyPersonnel": {"unitName": "市管理员","unitAddress": "眉山市政务服务中心","personName": "赵六","phone": "19162984018","provinceName": "四川省","cityName": "眉山市","countyName": ""},"leaf": true},{"id": "11","name": "孙七","children": [],"emergencyPersonnel": {"unitName": "市管理员","unitAddress": "眉山市政务服务中心","personName": "孙七","phone": "18180809001","provinceName": "四川省","cityName": "眉山市","countyName": ""},"leaf": true}],"emergencyPersonnel": null,"leaf": false}],"emergencyPersonnel": null,"leaf": false}],"emergencyPersonnel": null,"leaf": false},{"id": "440000","name": "广东省","children": [{"id": "440100","name": "广州市","children": [{"id": "天河区管理员","name": "天河区管理员","children": [{"id": "12","name": "周八","children": [],"emergencyPersonnel": {"unitName": "天河区管理员","unitAddress": "广州市天河区政务中心","personName": "周八","phone": "18228880309","provinceName": "广东省","cityName": "广州市","countyName": "天河区"},"leaf": true},{"id": "13","name": "吴九","children": [],"emergencyPersonnel": {"unitName": "天河区管理员","unitAddress": "广州市天河区政务中心","personName": "吴九","phone": "18990370720","provinceName": "广东省","cityName": "广州市","countyName": "天河区"},"leaf": true}],"emergencyPersonnel": null,"leaf": false},{"id": "海珠区管理员","name": "海珠区管理员","children": [{"id": "14","name": "郑十","children": [],"emergencyPersonnel": {"unitName": "海珠区管理员","unitAddress": "广州市海珠区政务中心","personName": "郑十","phone": "15508337779","provinceName": "广东省","cityName": "广州市","countyName": "海珠区"},"leaf": true}],"emergencyPersonnel": null,"leaf": false}],"emergencyPersonnel": null,"leaf": false},{"id": "440300","name": "深圳市","children": [{"id": "南山区管理员","name": "南山区管理员","children": [{"id": "15","name": "钱十一","children": [],"emergencyPersonnel": {"unitName": "南山区管理员","unitAddress": "深圳市南山区政务中心","personName": "钱十一","phone": "15983336111","provinceName": "广东省","cityName": "深圳市","countyName": "南山区"},"leaf": true}],"emergencyPersonnel": null,"leaf": false}],"emergencyPersonnel": null,"leaf": false}],"emergencyPersonnel": null,"leaf": false},{"id": "330000","name": "浙江省","children": [{"id": "330100","name": "杭州市","children": [{"id": "西湖区管理员","name": "西湖区管理员","children": [{"id": "16","name": "冯十二","children": [],"emergencyPersonnel": {"unitName": "西湖区管理员","unitAddress": "杭州市西湖区政务中心","personName": "冯十二","phone": "18783398823","provinceName": "浙江省","cityName": "杭州市","countyName": "西湖区"},"leaf": true},{"id": "17","name": "陈十三","children": [],"emergencyPersonnel": {"unitName": "西湖区管理员","unitAddress": "杭州市西湖区政务中心","personName": "陈十三","phone": "13547674447","provinceName": "浙江省","cityName": "杭州市","countyName": "西湖区"},"leaf": true}],"emergencyPersonnel": null,"leaf": false},{"id": "余杭区管理员","name": "余杭区管理员","children": [{"id": "18","name": "褚十四","children": [],"emergencyPersonnel": {"unitName": "余杭区管理员","unitAddress": "杭州市余杭区政务中心","personName": "褚十四","phone": "18160172259","provinceName": "浙江省","cityName": "杭州市","countyName": "余杭区"},"leaf": true}],"emergencyPersonnel": null,"leaf": false}],"emergencyPersonnel": null,"leaf": false}],"emergencyPersonnel": null,"leaf": false}],// 当前层级数据currentLevelData: [],// 层级导航路径breadcrumbList: [],// 已选择的人员selectedPersons: [],// 层级历史记录，用于返回levelHistory: []};},onLoad() {// 初始化层级数据（因personnelData改为数组，此处调整为加载所有省份）this.currentLevelData = this.personnelData;this.breadcrumbList = ["全国"];this.levelHistory = [this.currentLevelData];},methods: {// 获取层级颜色getLevelColor(item) {if (item.leaf) {return '#E0E7FF';}const colors = ['#E0F2FE', '#DBEAFE', '#EFF6FF', '#F0FDF4', '#FEF3C7'];let hash = 0;for (let i = 0; i < item.name.length; i++) {hash = item.name.charCodeAt(i) + ((hash << 5) - hash);}return colors[Math.abs(hash) % colors.length];},// 获取层级代码getLevelCode(item) {if (item.leaf) {return item.name.charAt(0);}return item.name.substring(0, 2);},// 递归获取某个节点下的所有叶子节点getAllLeafNodes(node) {let leafNodes = [];if (node.leaf) {leafNodes.push(node);} else if (node.children && node.children.length > 0) {node.children.forEach(child => {leafNodes = leafNodes.concat(this.getAllLeafNodes(child));});}return leafNodes;},// 计算某个节点下的叶子节点总数getAllLeafCount(node) {return this.getAllLeafNodes(node).length;},// 判断某个节点的选中状态isNodeSelected(node) {const leafNodes = this.getAllLeafNodes(node);if (node.leaf) {return this.selectedPersons.some(p => p.id === node.id);}return leafNodes.every(leaf =>this.selectedPersons.some(p => p.id === leaf.id));},// 判断某个非叶子节点是否半选isNodeIndeterminate(node) {if (node.leaf) return false;const leafNodes = this.getAllLeafNodes(node);const selectedLeafCount = leafNodes.filter(leaf =>this.selectedPersons.some(p => p.id === leaf.id)).length;return selectedLeafCount > 0 && selectedLeafCount < leafNodes.length;},// 将叶子节点转换为selectedPersons格式convertLeafToSelected(leafNode) {return {id: leafNode.id,name: leafNode.name,phone: leafNode.emergencyPersonnel.phone,unitName: leafNode.emergencyPersonnel.unitName,unitAddress: leafNode.emergencyPersonnel.unitAddress,provinceName: leafNode.emergencyPersonnel.provinceName,cityName: leafNode.emergencyPersonnel.cityName,countyName: leafNode.emergencyPersonnel.countyName};},// 处理节点选择 - 修正事件参数问题handleNodeSelect(node, checked) {const leafNodes = this.getAllLeafNodes(node);if (checked) {// 选中操作：添加所有未选中的叶子节点leafNodes.forEach(leaf => {const isExist = this.selectedPersons.some(p => p.id === leaf.id);if (!isExist) {this.selectedPersons.push(this.convertLeafToSelected(leaf));}});} else {// 取消选中：移除所有相关叶子节点this.selectedPersons = this.selectedPersons.filter(p =>!leafNodes.some(leaf => leaf.id === p.id));}},// 处理层级项点击handleLevelItemClick(item) {if (!item.leaf && item.children && item.children.length > 0) {// 判断当前层级是否是最外层（全国层级）const isRootLevel = this.breadcrumbList.length === 1 && this.breadcrumbList[0] === "全国";if (!isRootLevel) {this.breadcrumbList.push(item.name);} else {// 从全国进入省份时，更新导航路径this.breadcrumbList = ["全国", item.name];}this.currentLevelData = item.children;this.levelHistory.push(this.currentLevelData);}},// 返回上一级goBackToLevel(index) {if (index >= this.breadcrumbList.length - 1) return;// 调整导航路径this.breadcrumbList = this.breadcrumbList.slice(0, index + 1);// 调整层级历史this.levelHistory = this.levelHistory.slice(0, index + 1);// 更新当前层级数据this.currentLevelData = this.levelHistory[index];},// 前往表单页面toFormPage() {console.log(this.selectedPersons);if (this.selectedPersons.length === 0) {this.$u.toast('请至少选择一个人员');return;}}}
};
</script><style scoped>
/* 样式保持不变 */
.container {background-color: #F8F8F8;min-height: 100vh;padding-bottom: 60px;
}.breadcrumb {padding: 12px 15px;background-color: white;display: flex;align-items: center;font-size: 14px;overflow-x: auto;white-space: nowrap;
}.breadcrumb-item {color: #6B7280;padding: 0 2px;
}.breadcrumb-item-active {color: #4F46E5;font-weight: 500;
}.breadcrumb-separator {margin: 0 4px;color: #D1D5DB;
}.level-content {background-color: white;padding-top: 10px;
}.level-item {display: flex;align-items: center;justify-content: space-between;padding: 12px 15px;border-bottom: 1px solid #F3F4F6;
}.level-item-left {display: flex;align-items: center;width: 80%;
}.level-icon {width: 36px;height: 36px;border-radius: 50%;display: flex;align-items: center;justify-content: center;
}.level-icon-text {font-size: 14px;font-weight: 500;color: #4F46E5;
}.level-info {margin-left: 12px;
}.level-title {font-size: 16px;color: #1F2937;
}.level-desc {font-size: 12px;color: #6B7280;margin-top: 2px;display: block;
}.select-checkbox {width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;
}.footer-bar {position: fixed;bottom: 0;left: 0;right: 0;background-color: white;display: flex;align-items: center;justify-content: space-between;padding: 10px 15px;border-top: 1px solid #F3F4F6;}.selected-info {display: flex;align-items: center;color: #1F2937;font-size: 14px;
}.selected-count {margin-left: 5px;
}.next-button {width: 120px;border-radius: 20px;
}
</style>

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

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

相关文章

徐州服务器：机柜租用具体包含哪些内容？

徐州服务器：机柜租用具体包含哪些内容？

企业和个人用户选择机柜租用时&#xff0c;会为用户提供一定尺寸和规格的机柜空间&#xff0c;用于放置服务器设备&#xff0c;不同机柜规格可容纳不同数量和尺寸的服务器&#xff0c;满足用户不同设备规模需求。提供稳定且充足的电力供应&#xff0c;确保服务器设备正常运行&a…
阅读更多...
AI热点周报（8.24~8.30）：Grok 2.5开源，OpenAI Realtime正式商用，Meta或与OpenAI或Google合作？

AI热点周报（8.24~8.30）：Grok 2.5开源，OpenAI Realtime正式商用，Meta或与OpenAI或Google合作？

名人说&#xff1a;博观而约取&#xff0c;厚积而薄发。——苏轼《稼说送张琥》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录一、3分钟速览版&#xff1a;一张表看懂本周AI大事二、OpenAI&#xff1a;gpt-realti…
阅读更多...
Linux笔记---计算机网络概述

Linux笔记---计算机网络概述

1. 什么是计算机网络计算机网络是指&#xff1a;将地理位置不同、具备独立数据处理能力的多台计算机&#xff08;或终端设备&#xff0c;如手机、打印机&#xff09;&#xff0c;通过 "通信线路"&#xff08;如网线、光纤、无线信号&#xff09;和 "网络协议&qu…
阅读更多...
AGDO-BP+NSGAII梯度下降优化算法优化BP神经网络+NSGAII多目标优化算法，三目标和四目标案例

AGDO-BP+NSGAII梯度下降优化算法优化BP神经网络+NSGAII多目标优化算法，三目标和四目标案例

目录效果一览基本介绍程序设计参考资料效果一览 四目标效果 三目标效果 基本介绍 1.AGDO-BPNSGAII&#xff0c;梯度下降优化算法优化BP神经网络NSGAII多目标优化算法&#xff0c;工艺参数优化、工程设计优化&#xff01;&#xff08;Matlab完整源码和数据&#xff0…
阅读更多...
Java8-21的核心特性以及用法

Java8-21的核心特性以及用法

Java81. Lambda表达式‌‌理解‌&#xff1a;简化匿名内部类&#xff0c;允许将函数作为方法参数传递。 ‌用法‌&#xff1a;(参数) -> {表达式或代码块} ‌示例‌&#xff1a;// 传统匿名内部类 Runnable r1 new Runnable() {Overridepublic void run() {System.out.prin…
阅读更多...
《投资-45》- 《我从达尔文那里学到的投资知识》的核心思想和观点

《投资-45》- 《我从达尔文那里学到的投资知识》的核心思想和观点

《我从达尔文那里学到的投资知识》的核心思想是将达尔文进化论的底层逻辑——“适应、变异、选择、共生”——映射到投资领域&#xff0c;提出投资本质上是投资者在市场“生态系统”中通过动态调整策略、应对不确定性、构建生存优势以实现长期增值的过程。以下是其核心观点的分…
阅读更多...
c#：抽象类中的方法

c#：抽象类中的方法

在C#中&#xff0c;抽象类中的方法是否必须实现取决于方法的类型和派生类的性质&#xff1a;‌抽象方法‌必须声明在抽象类中&#xff0c;且没有方法体&#xff08;仅以分号结尾&#xff09;。‌派生类必须实现所有抽象方法‌&#xff0c;除非派生类本身也是抽象类。实现时需使…
阅读更多...
ICCV 2025 | 清华IEDA提出GUAVA，单图创建可驱动的上半身3D化身！实时、高效，还能捕捉细腻的面部表情和手势。

ICCV 2025 | 清华IEDA提出GUAVA，单图创建可驱动的上半身3D化身！实时、高效，还能捕捉细腻的面部表情和手势。

从单张图片重建高质量、可动画化且面部与手部动作丰富的 3D 人体化身&#xff0c;应用前景广阔。但传统重建方法依赖多视角或单目视频&#xff0c;还要针对不同个体训练&#xff0c;复杂又耗时&#xff0c;且受 SMPLX 限制&#xff0c;难以捕捉面部表情。为解决这些问题&#x…
阅读更多...
LC正弦波振荡电路

LC正弦波振荡电路

LC正弦波振荡电路LC正弦波振荡电路与RC桥式正弦波振荡电路的组成原则在本质上是一致的&#xff0c;只是选频网络采用LC振荡电路&#xff01;引言 在RC正弦波振荡电路中&#xff0c;我们了解到——RC正弦波振荡电路的振荡频率一般在1MHz以下。为了得到1MHz以上的信号&#xff0c…
阅读更多...
从网络层接入控制过渡到应用层身份认证的过程

从网络层接入控制过渡到应用层身份认证的过程

这个过程非常经典，它涉及到了现代企业网络管理中几项核心的安全和控制技术。简单来说，这是一个从网络层接入控制过渡到应用层身份认证的过程。 其核心原理是：先保证设备是合法的（加域），再保证使用设备的人是合法的（网页认证）。 下面我为您详细分解其中的技术原理： 第…
阅读更多...
【笔记】float类型的精度有限，无法精确表示123456.6789

【笔记】float类型的精度有限，无法精确表示123456.6789

一、前情提要 有个Java数据转换的小示例&#xff1a; public class Example2_2 {public static void main(String[] args) {float f 123456.6789f;System.out.printf("f%30.12f", f);} }输出的结果是&#xff1a;123456.679687500000这里就发现了个问题&#xff0c;…
阅读更多...
西安电子科技大学金融专硕复试线为325分，推荐报考！

西安电子科技大学金融专硕复试线为325分，推荐报考！

西安电子科技大学的金融硕士专业&#xff0c;不仅依托银行、保险和证券三大子行业&#xff0c;强调数理分析与信息技术的融合&#xff0c;还拥有优越的就业前景和公平的招生政策&#xff0c;吸引了众多学子报考。西安电子科技大学西安电子科技大学“金融硕士专业”硕士点设立于…
阅读更多...
阿里云创建自己的博客，部署wordpress

阿里云创建自己的博客，部署wordpress

目录 1. 基础环境介绍与规划 1.1 操作系统 1.2 数据库环境 1.3 Web 服务器 1.4 PHP 环境 1.5 WordPress 应用环境 1.6 网络与安全 1.7 基础环境总览表 2.安装流程 2.1 准备环境 2.2 安装 MySQL 5.7 2.3 安装 PHP 及扩展 2.4 安装 Nginx&#xff08;或 Apache&…
阅读更多...
CoreShop微信小程序商城框架开启多租户-添加一个WPF客户端以便进行上传产品信息和图片（6）

CoreShop微信小程序商城框架开启多租户-添加一个WPF客户端以便进行上传产品信息和图片（6）

前几天已将基于开源CoreShop框架的微信小程序开启多租户功能，还开发了一个辅助客户端，已经完成了以下工作： 修改管理员表格，添加上所管理的店铺列表，两个产品信息表也全部加上所属店铺信息。 开发一个WPF客户端，能与服务器登录并能正常通信。尤其是添加了一个辅助类CoreH…
阅读更多...
LabVIEW虚拟实验平台设计

LabVIEW虚拟实验平台设计

​为突破实物实验教学的时空限制&#xff0c;解决实验设备不足、操作风险高等问题&#xff0c;设计基于专业软件的虚拟实验平台&#xff0c;以 “信号与系统” 无失真传输实验为实例&#xff0c;融合仿真与网络技术&#xff0c;适配高校工科实验教学&#xff0c;提升教学质量与…
阅读更多...
PHP Composer 依赖管理完整指南 入门到精通

PHP Composer 依赖管理完整指南 入门到精通

PHP Composer 依赖管理完整指南 入门到精通 Composer 改变了整个 PHP 开发生态&#xff0c;我用了 10 年&#xff0c;可以说它是 PHP 生态里最重要的工具&#xff0c;没有之一。不过我和 Composer 的关系一开始并不顺利——从刚接触时的一脸懵逼&#xff0c;到后来真正理解它的…
阅读更多...
【开题答辩全过程】以 基于SpringBoot的校园一卡通管理系统的设计与实现为例，包含答辩的问题和答案

【开题答辩全过程】以 基于SpringBoot的校园一卡通管理系统的设计与实现为例，包含答辩的问题和答案

个人简介一名14年经验的资深毕设内行人&#xff0c;语言擅长Java、php、微信小程序、Python、Golang、安卓Android等开发项目包括大数据、深度学习、网站、小程序、安卓、算法。平常会做一些项目定制化开发、代码讲解、答辩教学、文档编写、也懂一些降重方面的技巧。感谢大家的…
阅读更多...
深度学习中常用的激活函数

深度学习中常用的激活函数

参考文章&#xff1a; Activation Functions — All You Need To Know! | by Sukanya Bag | Analytics Vidhya | Medium 深度学习笔记&#xff1a;如何理解激活函数&#xff1f;&#xff08;附常用激活函数&#xff09; - 知乎 part-0_13.pdf 机器学习中的数学——激活函数&…
阅读更多...
无恶意软件勒索：Storm-0501如何转向云原生攻击

无恶意软件勒索：Storm-0501如何转向云原生攻击

Storm-0501基于云的勒索攻击链概览 | 图片来源&#xff1a;微软微软威胁情报部门最新研究显示&#xff0c;以经济利益为目的的威胁组织Storm-0501已将其勒索软件攻击模式从传统本地部署系统显著转向云原生攻击。报告警告称&#xff0c;该组织"持续优化攻击活动&#xff0c…
阅读更多...
k8s--etcd

k8s--etcd

目录 静态pod 使用步骤&#xff1a; 关键特性说明&#xff1a; 常见使用场景&#xff1a; 案例&#xff1a; 环境变量 配置全景解析 实操&#xff1a;​​ 查看etcd集群节点信息 查看集群健康状态 数据库操作命令 增加(put) 查询(get) 删除(del) 租约命令 添加…
阅读更多...
最新文章

Copyright @ 2022~2023