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>

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

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

相关文章

数据结构顺序表力扣例题AC——代码以及思路记录

顺序表力扣例题 27.移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不…

arm 汇编调用C

arm64 汇编调用C函数 main.s .section .text .globl main main:stp x29, x30, [sp, -16]! //store fp x29 lr x30mov x0, #0mov x1, #1bl addmov x1, x0 // x0 return ldp x29, x30, [sp], 16 //restore fp lrretadd.c #include <stdio.h> int add(int a, int…

go使用docker sdk停止和删除docker

go使用docker sdk停止和删除docker 代码参考 代码 package mainimport ("context""fmt""github.com/docker/cli/cli/connhelper""github.com/docker/docker/api/types/container""github.com/docker/docker/client""n…

性能优化-HVX 指令介绍

「发表于知乎专栏《移动端算法优化》」 本文主要介绍了 HVX 指令相关的知识&#xff0c;包括 HVX 寄存器相关内容&#xff0c;指令的背景依赖&#xff0c;部分常用 intrinsic HVX 指令。具体指令的详细内容及使用还需阅读 HVX 的指令文档&#xff0c;以及细致的实践操作。 &…

【node】关于npm、yarn、npx的区别与使用

文章目录 npm (Node Package Manager):安装依赖运行脚本 npx:执行项目依赖中的命令 yarn:安装依赖eg.使用npx yarn install 的作用 npm (Node Package Manager): 用途&#xff1a; npm 是 Node.js 官方提供的包管理工具&#xff0c;用于安装、管理和分享 JavaScript 代码包。安…

C语言—fopen和ab+

在C语言中&#xff0c;fopen(“data”,“ab”) 是使用 fopen 函数以追加和读写模式打开一个名为 “data” 的文件的方法。 下面是对这个函数调用的各个部分的解释&#xff1a; fopen 函数 fopen 是一个标准库函数&#xff0c;用于打开文件。它的原型定义在 <stdio.h> 头…

库函数的模拟实现

目录 模拟实现strlen 模拟实现strcpy 模拟实现strcmp 模拟实现strcat 模拟实现strstr 模拟实现memcpy 模拟实现memmove 模拟实现strlen #define _CRT_SECURE_NO_WARNINGS 1#include <stdio.h>int MyStrlen(char* str) {int len 0;while (str[len] ! \0)len;retu…

GitLab升级版本(任意用户密码重置漏洞CVE-2023-7028)

目录 前言漏洞分析影响范围查看自己的GitLab版本升级路程 升级过程13.1.1113.8.8 - 14.0.1214.3.614.9.5 - 16.1.6 前言 最近GitLab发了个紧急漏洞需要修复&#xff0c;ok接到命令立刻着手开始修复&#xff0c;在修复之前先大概了解一下这个漏洞是什么东西 漏洞分析 1、组件…

单点登陆(SSO)基于CAS实现前后端分离的SSO系统开发「IDP发起」

关于其他前端常见登录实现单点登录方案&#xff0c;请见「前端常见登录实现方案 单点登录方案 」 前沿 单点登录&#xff08;SSO&#xff09;&#xff0c;英文全称为 Single Sign On。 SSO 是指在多个应用系统中&#xff0c;用户只需要登录一次&#xff0c;就可以访问所有相互…

redis-持久化-1

Redis 提供了2个不同形式的持久化方式。 RDB&#xff08;Redis DataBase&#xff09; AOF&#xff08;Append Of File&#xff09; 一、Redis持久化之RDB 1.什么是RDB 在指定的时间间隔内将内存中的数据集快照写入磁盘&#xff0c; 也就是行话讲的Snapshot快照&#xff0c…

puppeteer实现截图

Window服务器说明 1.在本地安装 puppeteer 先创建一个本地文件夹puppeteer&#xff0c;我的地址D:\common_workspace\puppeteer 然后使用cmd打开这个文件夹所在位置&#xff0c;再执行如下两条命令即可。 npm install -g cnpm --registryhttps://registry.npm.taobao.orgcnpm …

剖析EasyExcel导入出现 The index of ‘xx‘ and ‘xx‘ must be inconsistent 解决方法

目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 在导出Excel的时候,出现如下问题: com.alibaba.excel.exception.ExcelCommonException: The index of tyreNumber and remark must be inconsistentat com.alibaba.exce

为什么需要数据仓库

为什么不在OLTP环境下分析&#xff1f; OLTP环境也会存储历史数据&#xff0c;但这些历史数据并不是业务运行所需的&#xff0c;这些历史数据需要经常归档到数据仓库&#xff0c;并且在OLTP数据库中删除。 相比之下&#xff0c;事务环境适用于连续处理事务&#xff0c;通常应…

搭建通讯猫类似的TCP服务端

最近需要一个公网的TCP服务端平台来做4G模组的发包测验&#xff0c;通讯猫(http://www.tongxinmao.com/App/Detail/id/1)貌似使用不了&#xff0c;就干脆在自己的腾讯云上搭建了简单的TCP服务端。 我们搭建可以在服务器上使用Python、Java、C#等语言自行编写服务器程序。 目前是…

KADB使用PXF连接KES验证

验证环境 KADB版本&#xff1a;Greenplum Database 6.0.0 build dev.V003R002C001B0181.d354cc9215 KES版本&#xff1a;KingbaseES V008R006C007B0012 Java版本&#xff1a;openjdk version "1.8.0_262" PXF部署 以下操作假设KADB和KES已经部署完成并且启动正常…

nomachine下载安装使用教程(远程桌面)

文章目录 参考链接 nomachine 参考链接 [1]【远程桌面】nomachine下载安装使用教程、zerotier下载安装使用教程超详细&#xff1a;https://blog.csdn.net/weixin_44029896/article/details/128555481 [2] 树莓派开发之旅&#xff08;一&#xff09;——使用Nomachine进行远…

java动态导入excel按照表头生成数据库表

1、创建接口接收文件 //controller层 PostMapping("/importExcel1")public void importExcel1(HttpServletRequest request, MultipartFile file) {try {waterMeterService.importExcel1(request,file);} catch (Exception e) {throw new RuntimeException(e);}}//se…

selenium执行出现异常,SessionNotCreatedException ChromeDriver only supports

问题现状&#xff1a; 运行程序报错&#xff1a; selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 114 Current browser version is 121.0.6167.85 with binary path /App…

重构改善既有代码的设计-学习(四):简化条件逻辑

1、分解条件表达式&#xff08;Decompose Conditional&#xff09; 可以将大块代码分解为多个独立的函数&#xff0c;根据每个小块代码的用途&#xff0c;为分解而得的新函数命名。对于条件逻辑&#xff0c;将每个分支条件分解成新函数还可以带来更多好处&#xff1a;可以突出条…

cartopy绘图特征

文章目录 添加特征add_feature区域截取 添加特征 cartopy中最基础的地图绘制函数是coastlines&#xff0c;即海岸线线条图&#xff0c;这很复合我们的绘图直觉&#xff0c;毕竟陆地和海洋的边缘&#xff0c;是最清晰的地理特征。而在此之上&#xff0c;还可以通过add_feature函…