uniapp用picker实现自定义三级联动(children)

数据大概得结构:

html:

<view class="invite"><u-cell title="点击选则" isLink :value="value" @click="shows=true"></u-cell><u-picker :show="shows" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="shows=false"@change="changeHandler"></u-picker></view>

js:

shows: false,columns: [],origiData: [],value: "",
async branchAppov() {const res = await branchAppov()this.origiData = res.datathis.handelData();},
//初始化开始数据handelData() {// console.log(this.origiData.value))let sheng = [];let shi = [];let qu = [];this.origiData.forEach(item => {sheng.push(item.name);// 设置出初始化的数据if (item.name == '董事会') {item.children.forEach(child => {shi.push(child.name);if (child.name == '项目部') {child.children.forEach(el => {qu.push(el.name);});}});}});this.columns.push(JSON.parse(JSON.stringify(sheng)),JSON.parse(JSON.stringify(shi)),JSON.parse(JSON.stringify(qu)));},changeHandler(e) {console.log(e, 333);const {columnIndex,value,values, // values为当前变化列的数组内容index,// 微信小程序无法将picker实例传出来,只能通过ref操作picker = this.$refs.uPicker} = e;// 当第一列值发生变化时,变化第二列(后一列)对应的选项if (columnIndex == 0) {// console.log(value)// picker为选择器this实例,变化第二列对应的选项this.origiData.forEach(item => {if (value[0] == item.name) {let shi = [];let flag = item.children[0];if(flag == undefined){picker.setColumnValues(1, shi);picker.setColumnValues(2, []);return}item.children.forEach((val, ol) => {shi.push(val.name);if (shi[0] == flag.name) { //设置默认开关(选择省份后设置默认城市)flag = '';let qu = [];val.children.forEach(vol => {qu.push(vol.name);});picker.setColumnValues(2, qu);}});picker.setColumnValues(1, shi);}});}//当第二列变化时,第三列对应变化if (columnIndex == 1) {this.origiData.forEach(item => {if (value[0] == item.name) {let shi = [];item.children.forEach((val, ol) => {shi.push(val.name);if (value[1] == val.name) {let qu = [];val.children.forEach(vol => {qu.push(vol.name);});picker.setColumnValues(2, qu);}});}});}},// 确认选中的数据confirm(e) {console.log('confirm', JSON.stringify(e));this.value = e.namae[0] + e.namae[1] + e.namae[2]this.shows = false;},

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

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

相关文章

【Hadoop】Hadoop基础架构的变化

1.x版本架构2.x版本架构3.x版本架构参考 1.x版本架构 NameNode&#xff1a;&#xff0c;负责文件系统的名字空间(Namespace)管理以及客户端对文 件的访问。NameNode负责文件元数据的管理和操作。是单节点。 Secondary NameNode&#xff1a;它的职责是合并NameNode的edit logs到…

参数学习——糖果问题(人工智能期末复习)

之前看了好久都不知道这题咋写&#xff0c;后来看了这篇机器智能-高频问题&#xff1a;糖果问题&#xff0c;大概看明白了&#xff0c;其实主要围绕着这两个公式 光看公式也看不懂&#xff0c;还是要结合题目来 己知有草莓味和酸橙味两种类型的糖果&#xff0c;分别放入5种不同…

I.MX RT1170双核学习(2):双核相互激活和启动流程

RT1170这个芯片带有双核&#xff1a;Cortex-M7和Corterx-M4&#xff0c;两个核都可以独立地运行&#xff0c;当然双核也可以同时运行。在上一篇文章中&#xff0c;介绍了一下在RT1170中消息模块MU的使用&#xff1a;双核通信之MU消息单元详解&#xff0c;因为这是双核之间用来通…

跟小德学C++之代码目录

嗨&#xff0c;大家好&#xff0c;我是出生在达纳苏斯的一名德鲁伊&#xff0c;我是要立志成为海贼王&#xff0c;啊不&#xff0c;是立志成为科学家的德鲁伊。最近&#xff0c;我发现我们所处的世界是一个虚拟的世界&#xff0c;并由此开始&#xff0c;我展开了对我们这个世界…

SQL进阶理论篇(二):数据库的设计范式

文章目录 简介数据库的设计范式有哪些数据库中的几种键从1NF到3NF1NF2NF3NFBCNF&#xff08;巴斯范式&#xff09; 反范式设计反范式的适用场景总结参考文献 简介 本小节主要内容&#xff1a; 数据库的设计范式都有哪些数据库的键都有哪些1NF、2NF和3NF都是指什么&#xff1f…

STM32的DMA的五大问题

1&#xff0c;DMA控制器的内部结构 STM32中的DMA控制器是一种用于在外设和存储器之间传输数据的专用硬件。DMA控制器的内部结构主要包括以下几个关键部分&#xff1a; 通道&#xff1a; DMA控制器可以有多个通道&#xff0c;每个通道独立管理一个数据传输任务。通道的数量取决于…

一进一出两线制(三线制)模拟量高速信号(50KHz)隔离变送器

一进一出两线制(三线制)模拟量高速信号(50KHz)隔离变送器 型号&#xff1a;JSD TA-2311F系列 产品特点&#xff1a; ◆小体积,低成本,标准 DIN35mm 导轨安装方式 ◆三端隔离(输入、输出、工作电源间相互隔离) ◆高速信号采集,隔离等(-3dB,Min≤ 3.5 uS) ◆高精度等级(0.1% F.S&…

mysql的redolog、undo、binlog的作用

概览&#xff1a; MySQL三大日志包括&#xff1a;undolog&#xff0c;redo log&#xff0c;binlog&#xff0c;它们分别有以下作用&#xff1a; undolog&#xff1a;是Innodb存储引擎事务生成的日志。用于事务的回滚和MVCC&#xff0c;保证了事务的原子性。 redo log&#x…

第二百零四回 模拟对话窗口的页面

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法 3. 示例代码4. 经验分享5. 内容总结 我们在上一章回中介绍了"修改组件风格的另外一种方法"相关的内容&#xff0c;本章回中将介绍" 如何做一个模拟对话框窗口的页面".闲话休提&#xff0c;让我…

群晖(Synology)更换硬盘时间和精神双重折磨的教训

话说玩磁盘阵列的最后结果就是时间上负担不起&#xff0c;并且还被嫌弃。 在磁盘都到位后下一步就是要选择冗余类型了&#xff0c;对大部分人来说使用群晖自己提供的就好了&#xff0c;通常是 SHR。 什么是 SHR Synology Hybrid RAID&#xff08;SHR&#xff09;是 Synology…

【C语言程序设计】数组程序设计

目录 前言 一、数组的定义和初始化 二、数组的基本操作 三、数组的高级应用 四、程序设计 4.1 程序设计第一题 4.2 程序设计第二题 4.3 程序设计第三题 总结 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助…

【什么是POI,为什么它会导致内存溢出?】

什么是POI&#xff0c;为什么它会导致内存溢出 什么是POIExcel并没看到的那么小POI的溢出原理 拓展知识几种Workbook格式 什么是POI Apache POl&#xff0c;是一个非常流行的文档处理工具&#xff0c;通常大家会选择用它来处理Excel文件。但是在实际使用的时候经常会遇到内存溢…

textarea 网页文本框在光标处添加内容

在前端研发中我们经常需要使用脚本在文本框中插入内容。如果产品要求不能直接插入开始或者尾部&#xff0c;而是要插入到光标位置&#xff0c;此时我们就需要获取光标/光标选中的位置。 很多时候&#xff0c;我在格式化文本处需要选择选项&#xff0c;将选择的信息输入到光标位…

html 中vue3 的setup里调用element plus的弹窗 提示

引入Elementplus之后&#xff0c;在setup&#xff08;&#xff09;方法外面导入ElMessageBox const {ElMessageBox} ElementPlus 源码 &#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><!-- import Vue before Elemen…

CAN 三: STM32 CAN相关寄存器介绍

1、寄存器列表&#xff08;F1/F4/F7&#xff09; 寄存器名称作用CAN_MCRCAN主控制寄存器主要负责CAN工作模式的配置CAN_BTR位时序寄存器用来设置分频/TBS1/TBS2/TSWJ等参数&#xff0c;设置测试模式CAN_(T/R)IxR标识符寄存器存放(待发送/接收)的报文ID、扩展ID、IDE位及RTR位C…

SpringBoot之实体参数的详细解析

1.3 实体参数 在使用简单参数做为数据传递方式时&#xff0c;前端传递了多少个请求参数&#xff0c;后端controller方法中的形参就要书写多少个。如果请求参数比较多&#xff0c;通过上述的方式一个参数一个参数的接收&#xff0c;会比较繁琐。 此时&#xff0c;我们可以考虑…

XSS防御:内容安全策略 CSP工作原理、配置技巧与最佳实践

前言 公司部门安全合规改造计划&#xff0c;要求所有的Web站点统一添加CSP规则。对于CSP机制我只是之前在应付面试的时候背过相关的概念&#xff0c;并没有真正在项目中实践过。所以希望借助本次改造任务好好理解并实践CSP机制。 什么是CSP CSP的全称是 Content Security Po…

CCF 202104-2:邻域均值--C++

#include<iostream> #include<bits/stdc.h>using namespace std;int A[601][601]; int n;//长宽都为n个像素double FindNeighborSum(int i,int j,int r,int A[][601]) {int sum0;//像素和 int gs0;//领域 中的像素个数 for(int xi-r;x<ir;x)//找到每一个领域像素…

数据分析基础之《numpy(3)—基本操作》

一、基本操作 1、adarray.方法() 2、np.函数名() 二、生成数组的方法 1、生成0和1的数组 为什么需要生成0和1的数组&#xff1f; 我们需要占用位置&#xff0c;或者生成一个空的数组 &#xff08;1&#xff09;ones(shape[, dtype, order]) 生成一组1 shape&#xff1a;形…

NOIP2017提高组day2 - T2:宝藏

题目链接 [NOIP2017 提高组] 宝藏 题目描述 参与考古挖掘的小明得到了一份藏宝图&#xff0c;藏宝图上标出了 n n n 个深埋在地下的宝藏屋&#xff0c; 也给出了这 n n n 个宝藏屋之间可供开发的 m m m 条道路和它们的长度。 小明决心亲自前往挖掘所有宝藏屋中的宝藏。但…