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

uniapp复选框 实现排他选项

选择了排他选项之后 复选框其他选项不可以选择
在这里插入图片描述

<view class="reportData" v-for="(val, index) in obj" :key="index">
<view v-if="val.type ==3" ><u-checkbox-group v-model="optionValue" placement="column"@change="(e) =>checkboxChange(e, val)"><view v-for="(item, i) in val.optionInfoList" :key="i"><u-checkbox :customStyle="{marginBottom: '20rpx'}" :label="item.optionName":name="item.optionName"></u-checkbox></view></u-checkbox-group></view>
</view>
<script>export default {data(){return {obj:"",optionValue:''}},onLoad(){this.init()},methods:{init(){//假设后台返回的数据格式res={"code":0,"msg":null,"data":{"name":"排他选择的问卷调查","questionInfoList":[{"id":"17","questionContent":"排他选项的题目?","type":"3",//3表示复选框"optionInfoList":[ //选项{"id":"1","optionName":"不包含选项","optionType":"1"},{"id":"2","optionName":"选项1","optionType":"1"},{"id":"3","optionName":"选项2","optionType":"1"},{"id":"4","optionName":"选项3","optionType":"1"},{"id":"5","optionName":"其他","optionType":"1"}]}]}}}//对数据进行处理let data=res.data.questionInfoListthis.obj=data.optionInfoList.map(item=>{//如果是复选框 type==3 让所有的复选框默认为false 不选中if(item.type==3){item.optionInfoList.map(sub=>{sub.checked=false;return sub})}return item})},checkboxFn(e, item, index,i){//跟新obj中的checked状态值this.$set(this.obj[index].optionInfoList[i],'checked',e)//如果选中 并且为排他选项if(item.optionType==1 && item.checked) {//对整个数据进行遍历let optionInfoList=this.obj[index].optionInfoList.map((rr,k)=>{//让排他项目选中 其他为falseif(rr.optionType==1){rr.checked=true}else {rr.checked=false}return rr})//更新obj数据this.$set(this.obj[index],'optionInfoList',optionInfoList)}else {//如果选中 并且部位排他项 则 排他项为false 其他根据选择的情况而定let optionInfoList=this.obj[index].optionInfoList.map((rr,k)=>{if(rr.optionType==1){console.log(11)rr.checked=false}return rr})this.$set(this.obj[index],'optionInfoList',optionInfoList)}},//checkboxChange(e, val, index) {}}</script>

相关文章:

uniapp复选框 实现排他选项

选择了排他选项之后 复选框其他选项不可以选择 <view class"reportData" v-for"(val, index) in obj" :key"index"> <view v-if"val.type 3" ><u-checkbox-group v-model"optionValue" placement"colu…...

openssl3.2/test/certs - 004 - cross root and root cross cert

文章目录 openssl3.2/test/certs - 004 - cross root and root cross cert概述笔记END openssl3.2/test/certs - 004 - cross root and root cross cert 概述 索引贴 openssl3.2 - 官方demo学习 - test - certs 笔记 // \file my_openssl_linux_log_doc_004.txt // openssl…...

图像分类】【深度学习】【轻量级网络】【Pytorch版本】EfficientNet_V2模型算法详解

【图像分类】【深度学习】【轻量级网络】【Pytorch版本】EfficientNet_V2模型算法详解 文章目录 【图像分类】【深度学习】【轻量级网络】【Pytorch版本】EfficientNet_V2模型算法详解前言EfficientNet_V2讲解自适应正则化的渐进学习(Progressive Learning with adaptive Regul…...

05.Elasticsearch应用(五)

Elasticsearch应用&#xff08;五&#xff09; 1.目标 咱们这一章主要学习Mapping&#xff08;映射&#xff09; 2.介绍 Mapping是对索引库中文档的约束&#xff0c;类似于数据表结构&#xff0c;作用如下&#xff1a; 定义索引中的字段的名称定义字段的数据类型&#xff…...

npm更换镜像

大家好&#xff01;今天给大家分享的知识是如何更换npm镜像 前言 有时候在加载npm时有时会很慢&#xff0c;那是由于node安装插件是从国外服务器下载&#xff0c;受网络影响大&#xff0c;速度慢且可能出现异常&#xff0c;这时候就需要更换镜像&#xff0c;使插件的安装快捷&…...

野指针(C语言)

野指针 //概念:野指针就是指针指向的位置是不可知的(随机的,不正确的 //,没有明确限制的,空间还属于操作系统而不属于程序的) //野指针成因: //1.指针未初始化 #include <stdio.h> int main() { int* p;//局部变量指针未初始化,默认为随机值 //此时p指向的空间不…...

动物姿态识别(数据集+代码)

动物姿态识别是指利用计算机视觉和深度学习技术来识别动物的姿态&#xff0c;即确定动物身体的姿态、方向和位置等信息。这种技术可应用于动物行为研究、动物健康监测、智能养殖等领域。 动物姿态识别的关键技术包括图像处理、特征提取和分类器设计。首先&#xff0c;需要对动…...

JSON-handle工具安装及使用

目录 介绍下载安装简单操作 介绍 JSON-Handle 是一款非常好用的用于操作json的浏览器插件&#xff0c;对于开发人员和测试人员来说是一款很好用的工具&#xff0c;如果你还没有用过&#xff0c;请赶紧下载安装吧&#xff0c;下面是安装过程和具体使用。 下载安装 点击下载JSON…...

kali安装LAMP和DVWA

LANMP简介 LANMP是指一组通常用来搭建动态网站或者服务器的开源软件&#xff0c;本身都是各自独立的程序&#xff0c;但是因为常被放在一起使用&#xff0c;拥有了越来越高的兼容度&#xff0c;共同组成了一个强大的Web应用程序平台。 L:指Linux&#xff0c;一类Unix计算机操作…...

上门服务小程序|预约上门服务系统开发有哪些功能?

在现代快节奏的生活中&#xff0c;压力和疲劳常常困扰着我们。为了缓解这种状况&#xff0c;越来越多的人选择去按摩店进行放松。然而&#xff0c;繁忙的工作和家庭责任往往让我们无法抽出时间去按摩店。在这种情况下&#xff0c;上门按摩服务应运而生。而随着科技的发展&#…...

uniapp vue3版本引用 jsencrypt加密库报错:“default“ is not exported by……

个人产生这个异常的原因&#xff1a;将历史项目&#xff08;vue2&#xff09;的jsencrypt文件复制到新项目&#xff08;vue3&#xff09;里直接引用报错。存在兼容问题&#xff0c;需要重新安装vue3版本的jsencrypt 安装依赖 npm install jsencrypt页面引入 import { JSEncry…...

【WPF.NET开发】WPF中的双向功能

本文内容 FlowDirectionFlowDocumentSpan 元素非文本元素的 FlowDirection数字替换 与其他任何开发平台不同&#xff0c;WPF 具有许多支持双向内容快速开发的功能&#xff0c;例如&#xff0c;同一文档中混合了从左到右和从右到左的数据。 同时&#xff0c;WPF 也为需要双向功…...

Pytest 测试框架与Allure 测试报告——Allure2测试报告-L3

目录&#xff1a; allure2报告中添加附件-图片 Allure2报告中添加附件Allure2报告中添加附件&#xff08;图片&#xff09;应用场景Allure2报告中添加附件&#xff08;图片&#xff09;-Python代码示例&#xff1a;allure2报告中添加附件-日志 Allure2报告中添加附件&#xff…...

【机器学习300问】16、逻辑回归模型实现分类的原理?

在上一篇文章中&#xff0c;我初步介绍了什么是逻辑回归模型&#xff0c;从它能解决什么问题开始介绍&#xff0c;并讲到了它长什么样子的。如果有需要的小伙伴可以回顾一下&#xff0c;链接我放在下面啦&#xff1a; 【机器学习300问】15、什么是…...

OPC【4】:物理包

概述 OPC遵循zip标准&#xff0c;因此可以使用python标准库zipfile对docx格式的物理文件进行读写操作。在OPC中&#xff0c;物理包与抽象包是一对相对的概念&#xff0c;后续可以看到抽象包内的内容是将物理包内的信息进行编排形成地。简单点理解&#xff0c;物理包的作用在于…...

关于 Go 协同程序(Coroutines 协程)、Go 汇编及一些注意事项。

参考&#xff1a; Go 汇编函数 - Go 语言高级编程 Go 嵌套汇编 - 掘金 (juejin.cn) 前言&#xff1a; Golang 适用 Go-Runtime&#xff08;Go 运行时&#xff0c;嵌入在被编译的PE可执行文件之中&#xff09;来管理调度协同程式的运行。 Go 语言没有多线程&#xff08;MT&a…...

深入剖析BaseMapperPlus扩展接口及其在MyBatis-Plus中的实践价值

前言 BaseMapperPlus并非MyBatis-Plus&#xff08;MP&#xff09;官方提供的标准接口&#xff0c;而是社区开发者基于MP的BaseMapper接口进行二次封装和增强后创建的一个自定义接口。这个概念可能因不同项目或个人实践而有所差异&#xff0c;但其核心思想是为了解决特定场景下…...

Linux之安装配置VCentOS7+换源

目录 一、安装 二、配置 三、安装工具XSHELL 3.1 使用XSHELL连接Linux 四、换源 前言 首先需要安装VMware虚拟机&#xff0c;在虚拟机里进行安装Linux 简介 Linux&#xff0c;一般指GNU/Linux&#xff08;单独的Linux内核并不可直接使用&#xff0c;一般搭配GNU套件&#…...

[极客大挑战 2019]LoveSQL1

万能密码测试&#xff0c;发现注入点 注意这里#要使用url编码才能正常注入 测试列数&#xff0c;得三列 查看table&#xff0c;一个是geekuser另一个是l0ve1ysq1 查看column&#xff0c;有id&#xff0c;username&#xff0c;password&#xff0c;全部打印出来&#xff0c;…...

网络安全的介绍

1.什么是网络安全 网络安全是一门关注保护计算机系统、网络基础设施和数据免受未经授权访问、破坏或窃取的学科。随着数字化时代的发展&#xff0c;网络安全变得尤为重要&#xff0c;因为大量的个人信息、商业机密和政府数据都储存在电子设备和云端系统中。以下是网络安全的概…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

tauri项目,如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...