分类选择，最多五级

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

组件代码

<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>

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

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

相关文章

企业c#语言源代码防泄密解决方案

企业c#语言源代码防泄密解决方案

在当今数字化时代&#xff0c;企业的核心业务往往依赖于软件应用程序。为了保护企业的知识产权和敏感信息&#xff0c;源代码的保密至关重要。对于制造类企业尤其是智能制造业来讲&#xff0c;最近几年是高速发展的时期&#xff0c;很多公司在做工厂流水线设备时&#xff0c;就…
阅读更多...
Python学习笔记——类、魔术方法

Python学习笔记——类、魔术方法

食用说明&#xff1a;本笔记适用于有一定编程基础的伙伴们。希望有助于各位&#xff01; 类 类的运用很常见&#xff1a;在大部分情况下&#xff0c;对一些特有的对象&#xff0c;可以使用特定的类来指向它&#xff1a; class Person:name unknownage -1sex 0partner No…
阅读更多...
微信小程序三种授权登录以及授权登录流程讲解

微信小程序三种授权登录以及授权登录流程讲解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《微信小程序开发实战》。&#x1f3af;&#x1f3a…
阅读更多...
小县城蔬菜配送小程序制作全攻略

小县城蔬菜配送小程序制作全攻略

随着互联网的普及和人们对生活品质要求的提高&#xff0c;越来越多的小县城开始开发蔬菜配送小程序&#xff0c;以满足当地居民对新鲜蔬菜的需求。制作一个小县城蔬菜配送小程序&#xff0c;需要经过以下步骤&#xff1a; 步骤一&#xff1a;登录乔拓云平台 首先&#xff0c;打…
阅读更多...
揭开 Amazon Bedrock 的神秘面纱 | 基础篇

揭开 Amazon Bedrock 的神秘面纱 | 基础篇

在 2023 年 4 月&#xff0c;亚马逊云科技曾宣布将 Amazon Bedrock 纳入使用生成式人工智能进行构建的新工具集。Amazon Bedrock 是一项完全托管的服务&#xff0c;提供各种来自领先 AI 公司&#xff08;包括 AI21 Labs、Anthropic、Cohere、Stability AI 和 Amazon 等&#xf…
阅读更多...
Android音视频开发之基础知识

Android音视频开发之基础知识

一、视频文件 1、视频格式 常见格式&#xff1a;mp4、mkv、flv 封装的数据&#xff1a;音频码流、视频码流 常用工具&#xff1a; [FFmpeg下载]:https://ffmpeg.org/download.html 下载、安装并配置环境变量 ffmpeg.exe 视频编解码 ffplay.exe 播放器库 ffprobe.exe 音视频分…
阅读更多...
git(部分)

git(部分)

1、git三个区域&#xff1a;工作区&#xff0c;暂存区&#xff0c;版本库 2、git文件状态&#xff1a;未跟踪&#xff0c;已跟踪&#xff08;新添加&#xff0c;未修改&#xff0c;已修改&#xff09; 如何查看暂存区和工作区文件状态&#xff1a;git status -s 3、查看版本记…
阅读更多...
mysql MVC jsp实现表分页

mysql MVC jsp实现表分页

mysql是轻量级数据库 在三层架构中实现简单的分页 在数据库sql编程中需要编写sql语句 SELECT * FROM sys.student limit 5,5; limit x,y x是开始节点&#xff0c;y是开始节点后的需要显示的长度。 在jdbc编程中需要给出x和y 一般是页数*页码&#xff0c;显示的长度。 代…
阅读更多...
【（数据结构）—— 基于单链表实现通讯录】

【（数据结构）—— 基于单链表实现通讯录】

&#xff08;数据结构&#xff09;—— 基于单链表实现通讯录 一.通讯录的功能介绍1.基于单链表实现通讯录(1). 知识要求(2). 功能要求 二.通讯录的代码实现1.通讯录的底层结构(单链表)(1).思路展示(2).底层代码实现(单链表)1.单链表头文件 —— &#xff08;函数的定义&#x…
阅读更多...
【分类讨论】CF1747D

【分类讨论】CF1747D

Problem - D - Codeforces 题意 思路 一看这个做法一定就是分类讨论 先判无解 显然&#xff0c;如果区间异或和不是0一定无解 如果区间内全是0&#xff0c;答案一定是0 之后怎么讨论 注意到需要讨论区间长度 如果长度是奇数&#xff0c;那么直接操作即可&#xff0c;答…
阅读更多...
Top 10 数据恢复工具，可从iPhone 和 iPad 恢复数据

Top 10 数据恢复工具，可从iPhone 和 iPad 恢复数据

您是否正在寻找最好的 iPad 恢复软件&#xff0c;但不知道哪个选项最好&#xff1f;没有什么可担心的。本文将为您提供有关根据文件类型、设备兼容性和数据丢失原因等因素选择合适的 iPad 恢复软件的提示。此外&#xff0c;前 10 名提到的恢复软件是安全可靠的。 第 1 部分、iP…
阅读更多...
ArmSoM-W3之RK3588硬编解码MPP环境配置

ArmSoM-W3之RK3588硬编解码MPP环境配置

1. 简介 瑞芯微提供的媒体处理软件平台&#xff08;Media Process Platform&#xff0c;简称 MPP&#xff09;是适用于瑞芯微芯片系列的 通用媒体处理软件平台。该平台对应用软件屏蔽了芯片相关的复杂底层处理&#xff0c;其目的是为了屏蔽不 同芯片的差异&#xff0c;为使用者…
阅读更多...
基于Java+Springboot+Vue前后端分离的商品库存销售管理系统

基于Java+Springboot+Vue前后端分离的商品库存销售管理系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 当今社会&#xff0c;…
阅读更多...
Python--循环中的两大关键词 break 与 continue

Python--循环中的两大关键词 break 与 continue

在Python循环中&#xff0c;经常会遇到两个常见的关键词&#xff1a;break 与 continue break&#xff1a;代表终止整个循环结构 continue&#xff1a;代表中止当前本次循环&#xff0c;继续下一次循环 break&#xff1a; 英 /breɪk/ v. 打破&#xff0c;打碎&#xff0c…
阅读更多...
看《软能力》的读后感

看《软能力》的读后感

最近在图书大夏看了一本书的一部分&#xff0c;书名是《软能力》。本人看到了几个有意思的观点。一是接一些兼职项目。 二是分享自己的技术&#xff0c;让同事能干自己的工作&#xff0c;让自己的工作变得别人也能干&#xff0c;才有机会让自己的职位提升。 三是让手动操作变…
阅读更多...
使用imx 8m 测试matter协议功能

使用imx 8m 测试matter协议功能

参考网址&#xff1a; https://github.com/nxp-imx/meta-matter 请使用Ubuntu-20.04。18.04python版本太老 注意repo会出现此报错&#xff0c;可以无视&#xff1a; git checkout imx_matter_2023_q3 这一步在这个目录下操作 项目交流、学习、开发&#xff0c;欢迎私信。
阅读更多...
【RNA biology】RNA的多功能性与早期生命进化

【RNA biology】RNA的多功能性与早期生命进化

文章目录 RNARNA plays core functions in Central Dogma of BiologyrRNAsnRNA RNA worldReplication催化作用感知环境变化并作出响应 来自Manolis Kellis教授&#xff08;MIT计算生物学主任&#xff09;的课 油管链接&#xff1a;6.047/6.878 Lecture 7 - RNA folding, RNA wo…
阅读更多...
TCP和UDP的原理及其区别(三次握手、四次挥手)

TCP和UDP的原理及其区别(三次握手、四次挥手)

TCP和UDP都是在传输层上工作的协议&#xff0c;用于在网络中传输数据。 1、TCP和UDP之间的区别 TCP和UDP的主要区别在于它们提供的服务和特性。TCP提供可靠的、有序的、基于连接的数据传输&#xff0c;适用于对数据完整性和可靠性要求较高的应用&#xff08;邮件、短信&#xf…
阅读更多...
Java多线程编程

Java多线程编程

文章目录 Java多线程编程线程概念线程常用方法线程创建线程优先级终止线程等待线程线程状态线程安全synchronizedvolatilewait和notify方法ThreadLocal的使用标准库线程安全类 Java多线程编程 线程概念 线程概念&#xff1a; 一个线程就是一个 “执行流”. 每个线程之间都可…
阅读更多...
Springboot-案例 增删改查二

Springboot-案例 增删改查二

准备 前端程序、后端工程&#xff08;web/mybatis/mysql/lombok&#xff09;、数据库 开发规范 GET&#xff1a;查询 POST&#xff1a;新增 PUT&#xff1a;修改 DELETE&#xff1a;删除 Result.java Data NoArgsConstructor AllArgsConstructor public class Result {pri…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023