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

分类选择,最多五级

效果图,这种竖向的分类选择,每一列可以用不同的背景颜色
在这里插入图片描述

组件代码

<template><view class="toolTypeBox" :style="`max-height:${maxHeight}`"><block v-for="(item,index) in datalist"><block v-if="item.list.length>0"><view><scroll-view scroll-y class="toolType-each" :style="`background-color: ${item.bgcolor};max-height:${maxHeight}`"><view><view v-for="(ite,inde) in item.list" :key="ite[idValue]" class="toolType-each-box" :class="[pip(index,inde)&&ite[idValue]==nowObject[idValue]?'active':'',item.current===inde?'moactive':'']" @tap="changeTab(index,inde)">{{ite[nameValue]}}</view></view></scroll-view></view></block></block></view>
</template><script>export default{name:'tool-type',data(){return{datalist:[{list:[],current:0,bgcolor:'#ECECEC',},{list:[],current:0,bgcolor:'#F8F8F8',},{list:[],current:0,bgcolor:'#FFF',},{list:[],current:0,bgcolor:'#FFF',},{list:[],current:0,bgcolor:'#FFF',},],nowCurrent:[null,null],//当前选中nowObject:{},//当前选中个的数据}},props:{dataList:{type:Array,default:() =>{return []}},//默认选中iddefaultId:{type:String|Number,default:''},maxHeight:{type:String,default:'800rpx'},parentIdValue:{type:String,default:'parentId'},idValue:{type:String,default:'id'},nameValue:{type:String,default:'name'},childrenValue:{type:String,default:'children'},},methods:{//获取默认id在数组中的位置getParent(data2, nodeId2) {var arrRes = [];if (data2.length == 0) {if (!!nodeId2) {arrRes.unshift(data2);}return arrRes;}let rev = (data, nodeId) => {for (var i = 0, length = data.length; i < length; i++) {let node = data[i];if (node[this.idValue] == nodeId) {arrRes.unshift(i);rev(data2, node[this.parentIdValue]);break;} else {if (!!node[this.childrenValue]) {rev(node[this.childrenValue], nodeId);}}}return arrRes;};arrRes = rev(data2, nodeId2);return arrRes;},mate(list){let aaa = this.getParent(list,this.defaultId)//没有该id时,清空选中的位置if(!aaa || aaa.length == 0){this.nowCurrent = [null,null];this.changeTab(0,0,'noId')return}let bbb = [];aaa.map((r,v) =>{this.datalist[v].current = r;if(v === 0){let ll = this.datalist[0].list[aaa[0]][this.childrenValue];bbb = ll;this.datalist[v+1].list = ll;}else{let ll = bbb[r][this.childrenValue];bbb = ll;this.datalist[v+1].list = ll;}//将默认选中ID的子集展示出来if(v === aaa.length-1){this.changeTab(aaa.length-1,aaa[aaa.length-1],'zidong')}})},//获取已选中的IdgetSelectId(){return this.nowObject;},pip(i,v){if(this.nowCurrent[0] === i && this.nowCurrent[1] === v){return true}else{return false}},//选择changeTab(i,v,s){console.log('选择',i,v)switch(i){case 0://第一层if(this.datalist[i].list){// if(v === this.datalist[i].current)return;this.datalist[i].current = v;this.datalist[1].current = 0;this.datalist[2].current = 0;this.datalist[3].current = 0;this.datalist[4].current = 0;this.datalist[1].list = [];this.datalist[2].list = [];this.datalist[3].list = [];this.datalist[4].list = [];let aa = this.datalist[i].list[v][this.childrenValue];if(aa?.length>0){this.datalist[1].list = aa;let bb = aa[0][this.childrenValue];if(bb?.length>0){this.datalist[2].list = bb;let cc = bb[0][this.childrenValue];if(cc?.length>0){this.datalist[3].list = cc;let dd = cc[0][this.childrenValue];if(dd?.length>0){this.datalist[4].list = dd;}}}console.log('叔叔叔苏火速火速',this.datalist)}else{if(s !== 'noId'){this.nowCurrent[0] = i;this.nowCurrent[1] = v;if(s !== 'zidong'){this.$emit('selectType',this.datalist[i].list[v])this.nowObject = this.datalist[i].list[v];}}}}else{this.nowCurrent[0] = i;this.nowCurrent[1] = null;}breakcase 1://第二层if(this.datalist[i].list){// if(v === this.datalist[i].current)return;this.datalist[i].current = v;this.datalist[2].current = 0;this.datalist[3].current = 0;this.datalist[4].current = 0;this.datalist[2].list = [];this.datalist[3].list = [];this.datalist[4].list = [];let aa = this.datalist[i].list[v][this.childrenValue];if(aa?.length>0){this.datalist[2].list = aa;let bb = aa[0][this.childrenValue];if(bb?.length>0){this.datalist[3].list = bb;let cc = bb[0][this.childrenValue];if(cc?.length>0){this.datalist[4].list = cc;}}}else{if(s !== 'noId'){this.nowCurrent[0] = i;this.nowCurrent[1] = v;if(s !== 'zidong'){this.$emit('selectType',this.datalist[i].list[v])this.nowObject = this.datalist[i].list[v];}}}}else{this.nowCurrent[0] = i;this.nowCurrent[1] = null;}breakcase 2://第三层if(this.datalist[i].list){// if(v === this.datalist[i].current)return;this.datalist[i].current = v;this.datalist[3].current = 0;this.datalist[4].current = 0;this.datalist[3].list = [];this.datalist[4].list = [];let aa = this.datalist[i].list[v][this.childrenValue];if(aa?.length>0){this.datalist[3].list = aa;let bb = aa[0][this.childrenValue];if(bb?.length>0){this.datalist[4].list = bb;}}else{if(s !== 'noId'){this.nowCurrent[0] = i;this.nowCurrent[1] = v;if(s !== 'zidong'){this.$emit('selectType',this.datalist[i].list[v])this.nowObject = this.datalist[i].list[v];}}}}else{this.nowCurrent[0] = i;this.nowCurrent[1] = null;}breakcase 3://第四层if(this.datalist[i].list){// if(v === this.datalist[i].current)return;this.datalist[i].current = v;this.datalist[4].current = 0;this.datalist[4].list = [];let aa = this.datalist[i].list[v][this.childrenValue];if(aa?.length>0){this.datalist[4].list = aa;}else{if(s !== 'noId'){this.nowCurrent[0] = i;this.nowCurrent[1] = v;if(s !== 'zidong'){this.$emit('selectType',this.datalist[i].list[v])this.nowObject = this.datalist[i].list[v];}}}}else{this.nowCurrent[0] = i;this.nowCurrent[1] = null;}breakcase 4://第五层if(this.datalist[i].list){// if(v === this.datalist[i].current)return;this.datalist[i].current = v;if(s !== 'noId'){this.nowCurrent[0] = i;this.nowCurrent[1] = v;if(s !== 'zidong'){this.$emit('selectType',this.datalist[i].list[v])this.nowObject = this.datalist[i].list[v];}}}else{this.nowCurrent[0] = i;this.nowCurrent[1] = null;}break}}},watch:{dataList:{immediate:true,handler(newlist){// console.log('来了',newlist)if(this.defaultId&&newlist.length>0){this.datalist[0].list = newlist;this.mate(newlist) //匹配选中默认id}else{if(newlist?.length>0){this.datalist[0].list = newlist;let aa = newlist[0][this.childrenValue];if(aa?.length>0){this.datalist[1].list = aa;let bb = aa[0][this.childrenValue];if(bb?.length>0){this.datalist[2].list = bb;let cc = bb[0][this.childrenValue];if(cc?.length>0){this.datalist[3].list = cc;let dd = cc[0][this.childrenValue];if(dd?.length>0){this.datalist[4].list = dd;}}}}}else{this.datalist[0].list = [];this.datalist[0].current = 0;this.datalist[1].list = [];this.datalist[1].current = 0;this.datalist[2].list = [];this.datalist[2].current = 0;this.datalist[3].list = [];this.datalist[3].current = 0;this.datalist[4].list = [];this.datalist[4].current = 0;}}}},defaultId:{immediate:true,handler(newid){// console.log('默认',newid)if(this.dataList.length>0){this.mate(this.dataList) //匹配选中默认id}}}},}
</script><style lang="scss">.toolTypeBox{// width:100%;// height:100%;display: flex;background:#fff;}.toolType-each{width:220rpx;}.toolType-each-box{width:100%;padding:26rpx 20rpx;box-sizing: border-box;font-size: 30rpx;color: #666;text-align: center;word-break:break-all;}.moactive{background-color:#fff;}.active{background-color:#FFC526;color:#fff;}
</style>

相关文章:

分类选择,最多五级

效果图&#xff0c;这种竖向的分类选择&#xff0c;每一列可以用不同的背景颜色 组件代码 <template><view class"toolTypeBox" :style"max-height:${maxHeight}"><block v-for"(item,index) in datalist"><block v-if&…...

ASP.NET framework升级core .NET 6.0

C# ASP.NET framework 升级core .NET 6.0 .NET 7.0 .NET 8.0 或者以上 .net framework、.net standard、.net core .net 5/6/7/8 区别_.net 6.0和.net framework的区别-CSDN博客 using System.Web.Http; using HttpPostAttribute Microsoft.AspNetCore.Mvc.HttpPostA…...

BootStrap-前端框架

资料:https://v3.bootcss.com/components/ BootStrap的概念&#xff08;Web框架&#xff09; Bootstrap&#xff0c;来自 Twitter&#xff0c;是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的&#xff0c;它简洁灵活&#xff0c;使得 Web 开发更加快捷。…...

解读 | 自动驾驶系统中的多视点三维目标检测网络

原创 | 文 BFT机器人 01 背景 多视角三维物体检测网络&#xff0c;用于实现自动驾驶场景高精度三维目标检测&#xff0c;该网络使用激光雷达点云和RGB图像进行感知融合&#xff0c;以预测定向的三维边界框&#xff0c;相比于现有技术&#xff0c;取得了显著的精度提升。同时现…...

C++ 用户学习 Python 的最佳方法

对于很多是一名计算机科学专业的学生而言&#xff0c;很多入门是学习的C和 C&#xff0c;可能熟悉非常基本的 python 语法&#xff0c;以及 C 中相当高级的数据结构。现在想深入学习Python的话&#xff0c;光看很多在线教程可能没法有较大的提升&#xff0c;这里有一些针对C用户…...

使用docker搭建drogon windows10,linux,mac下开发环境

2023年10月13日14:52:26 本机环境 Windows 10 专业版 22H2 操作内核19045.2965 如果直接在windows&#xff0c;linux&#xff0c;mac上直接搭建环境确实有一点难度&#xff0c;之前drogon官方并未提供官方镜像&#xff0c;现在有了docker镜像确实方便了&#xff0c;其实我是最…...

【RKNN】YOLO V5中pytorch2onnx,pytorch和onnx模型输出不一致,精度降低

在yolo v5训练的模型&#xff0c;转onnx&#xff0c;再转rknn后&#xff0c;测试发现&#xff1a; rknn模型&#xff0c;量化与非量化&#xff0c;相较于pytorch模型&#xff0c;测试精度都有降低onnx模型&#xff0c;相较于pytorch模型&#xff0c;测试精度也有降低&#xff…...

六分科技CEO李阳:精准定位助力汽车智能化普及

10月10日&#xff0c;2023四维图新用户大会在上海成功举办。大会现场&#xff0c;六分科技展示了基于PPP-RTK技术的“星璨”产品和软硬件一体化解决方案。同时在智能驾驶主题论坛上&#xff0c;六分科技CEO李阳受邀发表了以《精准定位助力汽车智能化普及》为主题的演讲。 高精度…...

信号完整性分析基础知识之有损传输线、上升时间衰减和材料特性(六):衰减和dB

线路中的损耗对信号的主要影响是当信号沿线路长度传播时幅度减小。如果将幅度为 V 的正弦波电压信号引入传输线&#xff0c;则其幅度将随着传输线向下移动而下降。图 9-16 显示了如果我们可以冻结时间并观察直线上存在的正弦波&#xff0c;则正弦波在不同位置可能会是什么样子。…...

吃鸡达人必备:分享顶级干货+作图工具推荐+账号安全查询!

吃鸡达人们&#xff0c;你们好&#xff01;今天我来给大家介绍一些炙手可热的吃鸡话题&#xff0c;以及一些让你实力飙升的独家干货&#xff01; 首先&#xff0c;让我们说一下如何提高自己的游戏战斗力。作为一名专业吃鸡行家&#xff0c;我将与你们分享一些顶级游戏作战干货&…...

帆软报表解决单元格不显示问题

前言 使用帆软报表设计器制作普通报表时、设计器界面经常有一根垂直的 “虚线”。一旦单元格超过这条 “虚线” &#xff0c;那么真正打开报表就看不到这些列了。以下提供了简单的修正方法、欢迎大家讨论交流。 操作环境 设计器是帆软报表 9.0&#xff0c;操作系统是 Window…...

LeetCode讲解篇之138. 随机链表的复制

LeetCode讲解篇之138. 随机链表的复制 文章目录 LeetCode讲解篇之138. 随机链表的复制题目描述题解思路题解代码 题目描述 题解思路 先遍历一遍链表&#xff0c;用哈希表保存原始节点和克隆节点的映射关系&#xff0c;先只克隆节点的Val&#xff0c;然后再次遍历链表&#xff…...

主定理(简化版)

主定理&#xff08;Master Theorem&#xff09;是用于分析递归算法时间复杂度的一个重要工具。它适用于形式化定义的一类递归关系&#xff0c;通常采用分治策略解决问题的情况。 假设我们有一个递归算法&#xff0c;它将问题分解成 a a a 个子问题&#xff0c;每个子问题的规模…...

HTTP1.0和HTTP2.0的区别

相同点&#xff1a;所有的HTTP请求都要基于TCP连接。 HTTP1.0&#xff1a;每次发送请求时建立一个TCP连接&#xff0c;得到响应后&#xff0c;释放TCP连接。 HTP1.1&#xff1a;**相比于1.0&#xff0c;引入了Keep live&#xff0c;客户端得到响应后&#xff0c;不会立刻释放T…...

ARM资源记录《AI嵌入式系统:算法优化与实现》第八章(暂时用不到)

1.CMSIS的代码 书里给的5&#xff0c;https://github.com/ARM-software/CMSIS_5 现在有6了&#xff0c;https://github.com/ARM-software/CMSIS_6 这是官网的书&#xff0c;介绍cmsis函数的https://arm-software.github.io/CMSIS_5/Core/html/index.html 2.CMSIS介绍 Cort…...

微信小程序2

一&#xff0c;视图层 1.什么视图层 框架的视图层由 WXML 与 WXSS 编写&#xff0c;由组件来进行展示。 将逻辑层的数据反映成视图&#xff0c;同时将视图层的事件发送给逻辑层。 WXML(WeiXin Markup language) 用于描述页面的结构。 WXS(WeiXin Script) 是小程序的一套脚本语…...

G.711语音编解码器详解

语音编解码利用人听觉上的冗余对语音信息进行压缩从而达到节省带宽的目的。值得注意的是,本文说的是语音编解码器,也就Speech codec,而常用的还有另一种编解码器称作音频编解码器,英文是Audio codec,它们的区别如下。 以前在学校的时候研究了很多VoIP的编解码器从G.723到A…...

蓝桥杯每日一题2023.10.17

迷宫 - 蓝桥云课 (lanqiao.cn) 题目描述 样例&#xff1a; 01010101001011001001010110010110100100001000101010 00001000100000101010010000100000001001100110100101 01111011010010001000001101001011100011000000010000 0100000000101010001101000010100000101010101100…...

16.SpringBoot前后端分离项目之简要配置一

SpringBoot前后端分离项目之简要配置一 前面对后端所需操作及前端页面进行了了解及操作&#xff0c;这一节开始前后端分离之简要配置 为什么要前后端分离 为了更低成本、更高效率的开发模式。 前端有一个独立的服务器。 后端有一个独立的服务器。两个服务器之间实时数据交换…...

Probability Calibration概率校准大比拼:性能、应用场景和可视化对比总结

在机器学习中,概率校准(Probability Calibration)是一个重要的概念。简单来说,概率校准就是将分类器输出的原始预测概率转换为更准确、更可靠的概率值。这样做的目的是为了让模型的预测结果更接近实际情况,从而提高模型在特定应用场景中的可用性。 在Python的Scikit-Lear…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...