分类选择，最多五级

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

组件代码

<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，一经查实，立即删除！

相关文章

spark集成hive

spark集成hive

集群使用ambarihdp方式进行部署,集群的相关版本号如下所示: ambari版本 Version 2.7.4.0 HDP版本 HDP-3.1.4.0 hive版本 3.1.0 spark版本 2.3.0 集群前提条件: 1.Hdp、Spark、Hive都已部署好 2.Hive数据层建好&#xff0c;在Hdfs生成相应各层目录&#xff0c;后面配…
阅读更多...
大数据学习(16)-mapreduce详解

大数据学习(16)-mapreduce详解

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…
阅读更多...
企业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…
阅读更多...
【编解码格式】DivX系列、XviD

【编解码格式】DivX系列、XviD

DivX DivX是DivX公司&#xff08;前身是DivX Networks公司&#xff09;的著名品牌&#xff0c;一种MPEG-4技术视频编解码器。该公司2007年秋以2200万美元收购德国Main Concept。 DivX将encore2的代码继续发展成DivX 4.0&#xff0c;于2001年7月推出。至于曾有份参与OpenDivX的…
阅读更多...
Android音视频开发之基础知识

Android音视频开发之基础知识

一、视频文件 1、视频格式 常见格式&#xff1a;mp4、mkv、flv 封装的数据&#xff1a;音频码流、视频码流 常用工具&#xff1a; [FFmpeg下载]:https://ffmpeg.org/download.html 下载、安装并配置环境变量 ffmpeg.exe 视频编解码 ffplay.exe 播放器库 ffprobe.exe 音视频分…
阅读更多...
操作系统【OS】线程与进程的比较

操作系统【OS】线程与进程的比较

进程 线程 是什么的单位? 是资源分配的基本单位 是调度的基本单位 不能共享什么? 不能共享虚拟地址空间 不能共享栈指针 可以共享什么? 拥有一个完整的资源平台 每个进程都有独立的地址空间和资源 除了共享全局变量&#xff0c;不允许其他进程访问 某进程中的线程…
阅读更多...
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;显示的长度。 代…
阅读更多...
FreeRTOS最全教程（目录）

FreeRTOS最全教程（目录）

文章目录 前言一、为什么要学FreeRTOS二、FreeRTOS开发和裸机开发的区别三、FreeRTOS入门篇四、FreeRTOS深入篇五、自制FreeRTOS六、FreeRTOS项目开发总结 前言 本篇文章将作为FreeRTOS最全教程的目录使用。 一、为什么要学FreeRTOS 1.嵌入式系统开发&#xff1a; FreeRTOS …
阅读更多...
【webpack】wabpack5 知识梳理

【webpack】wabpack5 知识梳理

1、简单介绍 默认功能 可处理 js、json文件&#xff0c;处理 js 文件引入将其打包&#xff1b; 将es6的import规范编译为浏览器可识别的commonjs规范&#xff1b; 生产环境比开发环境打包多了代码丑化、压缩&#xff1b; 五大核心 入口(entry)&#xff1a;指定打包入口&…
阅读更多...
【（数据结构）—— 基于单链表实现通讯录】

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

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

【分类讨论】CF1747D

Problem - D - Codeforces 题意 思路 一看这个做法一定就是分类讨论 先判无解 显然&#xff0c;如果区间异或和不是0一定无解 如果区间内全是0&#xff0c;答案一定是0 之后怎么讨论 注意到需要讨论区间长度 如果长度是奇数&#xff0c;那么直接操作即可&#xff0c;答…
阅读更多...
【Overload游戏引擎细节分析】鼠标键盘控制摄像机原理

【Overload游戏引擎细节分析】鼠标键盘控制摄像机原理

在上文中分析了摄像机类的实现&#xff0c;在计算投影视图矩阵时需要给摄像机输入其位置及转动四元数。这两个量一般通过鼠标键盘来控制&#xff0c;从而达到控制摄像机的目的。本文分析一下其控制原理。 Overload的摄像机控制实现在类CameraController中&#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;…
阅读更多...
最新文章

Copyright @ 2022~2023