小程序多选组件步骤

1.下载插件导入到Hbuilder

下拉多选,完全仿照微信原生效果,简单美观可扩展,可在线体验 - DCloud 插件市场

2. 在页面使用组件

<view class="multiple-box" :class="['select', rc_person_manager_info.manage_type ? 'selected' : '']" @tap="handleMultiple(pickerIndex.manage_typeIndex)">{{getMultipleLabel(pickerList.manage_typeList,rc_person_manager_info.manage_type) || '请选择'}}<uni-icons class="rt" type="arrowdown" color="#bcbcbc"></uni-icons></view><multiple-picker title="请选择" :show="selectMultiple.show" :columns="pickerList.manage_typeList" :defaultIndex="pickerIndex.manage_typeIndex" @confirm="confirmMultiple" @cancel="selectMultiple.show = false"></multiple-picker>数据结构:
pickerIndex:{manage_typeIndex:[],},pickerList:{manage_typeList:[{label: '法人',value: 'FR'},{label: '实控人',value: 'SKR'},{label: '总经理',value: 'ZJL'},{label: '财务负责人',value: 'CW'},{label: '其他',value: 'QT'},],},
selectMultiple: {show: false,index: [],},

3.方法

handleMultiple(val) {console.log(val,'val');this.pickerIndex.manage_typeIndex = val || [];this.selectMultiple.show = true;},// 处理赋值存储为编码格式confirmMultiple(e) {let temp = [];e.selected.forEach(item => {temp.push(item.value);})console.log(e.value,'e.valuee.value');this.rc_person_manager_info.manage_type = temp.toString();this.pickerIndex.manage_typeIndex = e.value;this.selectMultiple.show = false;},// 多选获取对应值getMultipleLabel(list,value){let temp = []; //存放临时中文数组let tempList = value.split(',')tempList.forEach(item=>{list.forEach(item2 => {if(item2.value === item){temp.push(item2.label)}});})return temp != '' ? temp.toString() : '请选择';},// 多选获取对应编码getMultipleValue(list,label){let temp = []; //存放临时编码数组let tempList = label.split(',')tempList.forEach(item=>{list.forEach(item2 => {if(item2.label === item){temp.push(item2.value)}});})return temp != '' ? temp.toString() : '';},

4.格式数据

//数据库要存储编码 

this.rc_person_manager_info.manage_type = this.getMultipleValue(this.pickerList.manage_typeList,data.manageType);

//页面默认选择时,数据显示了,但是对钩没有显示

            this.pickerIndex.manage_typeIndex =this.getMultipleValue(this.pickerList.manage_typeList,data.manageType).split(',');

 

 

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

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

相关文章

从创意立项到产品赚钱的全调优过程复盘,如何提高产品存活率 | TopOn变现干货

10月28日&#xff0c;由TopOn、罗斯基联合主办的“游戏赛道新机会”主题沙龙在成都举办。活动邀请了国内外多位知名公司及游戏爆款产品的负责人分享&#xff0c;分别从各自的方向及经验出发&#xff0c;以数据、案例、产品分析、行业趋势等多个维度&#xff0c;为行业从业者带来…

GoogLenet网络结构及代码实现

GoogLeNet 是由 Christian Szegedy 等人在 Google 的研究团队于 2014 年提出的深度卷积神经网络架构&#xff0c;它在当年的 ImageNet 大规模视觉识别挑战赛&#xff08;ILSVRC&#xff09;中取得了优异的成绩。GoogLeNet 的全名是 Inception v1&#xff0c;因其创新的 Incepti…

RGB,深度图,点云和体素的相互转换记录

目录 1.RGBD2Point 1.2 步骤 2.Point2Voxel-Voxelization 2.1 原理 2.2 代码 3.Voxel2Point 4.Point2RGB 5.Voxel2RGB 1.RGBD2Point input&#xff1a;RGB D 内外惨 output&#xff1a;points cloud def depth2pcd(depth_img):"""深度图转点云数据图…

鸿蒙开发人才紧缺!这份《HarmonyOS教学视频》帮你更快上手鸿蒙

去年9月&#xff0c;华为宣布鸿蒙原生应用全面启动&#xff0c;基于开源鸿蒙开发的 HarmonyOS NEXT 鸿蒙星河版将在今年秋天正式和消费者见面。该版本系统底座将由华为全线自研&#xff0c;去掉传统安卓 AOSP 代码。 这意味着&#xff0c;鸿蒙星河版将不再兼容安卓应用&#xf…

47 vue 常见的几种模型视图不同步的问题

前言 这里主要是来看一下 关于 vue 中的一些场景下面 可能会出现 模型和视图 不同步更新的情况 然后 这种情况主要是 vue 中的对象 属性没有响应式的 setter, getter 然后 我们这里就来看一下 大多数的情况下的一个场景, 和一些处理方式 当然 处理方式主要是基于 Vue.set, …

Redis命令-Key的层级结构

基础篇Redis 4.4 Redis命令-Key的层级结构 Redis没有类似MySQL中的Table的概念&#xff0c;我们该如何区分不同类型的key呢&#xff1f; 例如&#xff0c;需要存储用户.商品信息到redis&#xff0c;有一个用户id是1&#xff0c;有一个商品id恰好也是1&#xff0c;此时如果使…

力扣 219.存在重复元素2

给你一个整数数组 nums 和一个整数 k &#xff0c;判断数组中是否存在两个 不同的索引 i 和 j &#xff0c;满足 nums[i] nums[j] 且 abs(i - j) < k 。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;nu…

【Golang星辰图】从加密到认证:Go语言中的协议与安全性库应用指南

保护通信和数据安全&#xff1a;Go语言中的协议与安全性库全解析 前言&#xff1a; 在当今信息时代&#xff0c;随着网络的普及和应用的广泛&#xff0c;保护通信和数据的安全性变得至关重要。Go语言作为一种简洁高效、并发安全的编程语言&#xff0c;提供了丰富的协议与安全…

你不知道的Python

Python&#xff0c;作为一种广泛使用的高级编程语言&#xff0c;因其易于学习和强大的库支持而受到开发者的青睐。尽管如此&#xff0c;Python 仍有许多鲜为人知的特性和技巧&#xff0c;这些隐藏的宝藏可以让编程工作变得更加高效和有趣。本文将揭示一些“你不知道的Python”特…

go发布包到github

1. 首先&#xff0c;我们在github上创建一个公有仓库并clone到本地 git clone https://github.com/kmust-why/gdmp-token.git cd gdmp-token/ 2. 在gdmp-token工程中初始化go.mod&#xff0c;其中后面的链接要跟github上创建的仓库和你的用户名对应 go mod init github.com…

OSPF GTSM(通用TTL安全保护机制)

目录 GTSM的定义 使用GTSM的目的 GTSM的原理 配置OSPF GTSM实例 组网需求 配置思路 操作步骤 1. 配置各接口的IP地址 2.配置OSPF基本功能 3.配置OSPF GTSM 4. 验证配置结果 GTSM的定义 GTSM&#xff08;Generalized TTL Security Mechanism&#xff09;&#xff0c;…

发票查验接口C++语言如何集成、发票OCR

说起发票查验工作&#xff0c;繁琐的发票信息录入与反复查验令财务人员头疼不已。数字化时代&#xff0c;企业财务管理的自动化需求越来越高&#xff0c;翔云发票查验API搭配发票识别接口为企业提供一种高效的财务管理解决方案。仅需上传发票图片即可快速提取发票四要素信息&am…

linux安装Zookeeper的详细步骤

1.Java环境确认 确保已经安装了Java环境&#xff0c;没有的自行安装 2.官网下载包 Apache ZooKeeper 3.安装 3.1上传到linux&#xff0c;解压 我的目录为/root/apache-zookeeper-3.8.4-bin 进入到/root/apache-zookeeper-3.8.4-bin/conf目录下&#xff0c;执行命令复制zoo…

uniapp实现列表动态添加

1.效果图&#xff1a; 2.代码实现&#xff1a; 这里没有用uniapp提供的uni-list控件 <template> <view id"app"> <!-- 这里为了让标题&#xff08;h&#xff09;居中展示&#xff0c;给h标签设置了父标签&#xff0c;并设置父标签text-…

RK3568-开启ptp服务

硬件支持 mac或者phy需要支持ptp驱动支持 CONFIG_PTP_1588_CLOCK=y虚拟机端:虚拟机只支持软件时间戳。 安装ptp服务:sudo apt-get install linuxptpbuildroot系统-开发板端:开发板支持硬件时间戳和软件时间戳。 BR2_PACKAGE_LINUXPTP=y 编译相关ptp4l程序ubuntu系统-开发…

python实战之PyQt5桌面软件

一. 演示效果 二. 准备工作 1. 使用pip 下载所需包 pyqt5 2. 下载可视化UI工具 QT Designer 链接&#xff1a;https://pan.baidu.com/s/1ic4S3ocEF90Y4L1GqYHPPA?pwdywct 提取码&#xff1a;ywct 3. 可视化UI工具汉化 把上面的链接打开, 里面有安装和汉化包, 前面的路径还要看…

【保姆级教程】YOLOv8自动数据标注

一、YOLOV8环境准备 1.1 下载安装最新的YOLOv8代码 仓库地址&#xff1a; https://github.com/ultralytics/ultralytics1.2 配置环境 pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple1.3 安装labelme标注工具 pip install labelme二、半自动标注…

buy me a btc 使用数字货币进行打赏赞助

最近在调研使用加密货币打赏的平台&#xff0c;发现idatariver平台 https://idatariver.com 推出的buymeabtc功能刚好符合使用场景&#xff0c;下图为平台的演示项目, 演示项目入口 https://buymeabtc.com/idatariver 特点 不少人都听说过buymeacoffee&#xff0c;可以在上面发…

Rust 标准库:std::env::args() 函数简介

std::env::args() 是 Rust 标准库中的一个函数&#xff0c;它属于 std::env 模块。这个函数用于获取并返回一个迭代器&#xff0c;该迭代器包含了程序运行时从命令行传入的所有参数。 当你运行一个 Rust 程序并从命令行传递参数时&#xff0c;例如&#xff1a; my_rust_progr…

upload-labs-master靶场训练笔记

2004.2.17 level-1 &#xff08;前端验证&#xff09; 新建一个写有下面一句话木马的php文件&#xff0c;然后把后缀改为png <?php eval($_POST["abc"]); ?> 用bp抓包后更改文件后缀为php 再用蚁剑等工具链接即可拿下shell level-2 &#xff08;后端…