uniapp 里折叠面板嵌套 uni-collapse 高度不能自适应解决办法

2023-11-11

<uni-collapse accordion v-model="accordionVal" @change="changeCollapse" ref="collapse">

					<uni-collapse-item :title="index+1+'、'+item.productTitle" v-for="(item,index) in listData"
						:key="index">
						<view class="content">
							<view class="text w100 gradeLi" v-for="(items,indexs) in item.children" :key="index+indexs" >
								<view class="gradeLiTitle">{{index+1}}.{{indexs+1}}.{{items.gradeName}}</view>
								<view class="gradeLiHg mt-2 flex">

									<uni-data-checkbox @change="handleSelectHg($event,index,indexs)"
										v-model="data.listData[index].children[indexs].checked"
										 :localdata="items.children" ></uni-data-checkbox>

								</view>
								<!-- 选择了不符合 -->
								<view class="gradeLiHgNo w100 mt-2"
									v-if="data.listData[index].children[indexs].checked==0">

									<uni-easyinput type="textarea"
										v-model="data.listData[index].children[indexs].wrongDescription"
										placeholder="请输入不符合说明" />

									<view class="w100 mt-2">
										<uni-easyinput class="" type="textarea"
											v-model="data.listData[index].children[indexs].rectificationMeasures"
											placeholder="请输入整改措施" />

									</view>


									<view class="w100 mt-2">
										<uni-easyinput v-model="data.listData[index].children[indexs].responsiblePerson"
											placeholder="责任人" />
									</view>
									<view class="mt-2">
										<my-upload-image
											v-model="data.listData[index].children[indexs].supportingMaterials"
											:limit="5" :index="index" :indexs="indexs"
											@dataToParent="handleDataFromChild"></my-upload-image>

									</view>
								</view>



							</view>
						</view>
					</uni-collapse-item>

				</uni-collapse>
	import {
		ref,
		onMounted,
		reactive,
		getCurrentInstance,
		onBeforeMount,
		toRefs
	} from 'vue'
	
	const {
		proxy
	} = getCurrentInstance();

 

	//选择符号不符合
	const handleSelectHg = ((e, index, indexs) => {

		data.listData[index].children[indexs].checked = e.detail.value;

		console.log("您选择了", data.listData[index].children[indexs].checked)
		// 选择了不符号之后去延时刷新高度
		handleHeight();
	})

	//解决超出不显示问题
	const handleHeight=(() => {
		proxy.$nextTick(() => {
			setTimeout(() => {
				console.log("1233")
				proxy.$refs.collapse.resize();
			}, 100)
		});
	})

这是一个巨坑

如果是vue2.0 把proxy改为this即可

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp 里折叠面板嵌套 uni-collapse 高度不能自适应解决办法 的相关文章

随机推荐

  • html烟花代码在线编程,canvas实现烟花的示例代码

    前言 马上过年了 我打算在后台里面偷偷地埋个新春祝福 放烟花的彩蛋 项目是基于react typescript的 因此最后封装成了一个组件 设置好开启时间就可以显示了 目录结构 目录结构大致如下 我们将烟花分为两个阶段 一个是未炸开持续上升
  • Python不同excel的合并操作

    Python不同excel的合并操作 23333333333我的第一篇博客 有一点瞎搞的感觉 0 0 问题描述 对7个类似下图的Excel进行合并 合并的最终效果 Excel文件需要可以找我 技术分析 获取表格中相同格式的部分进行操作 对除
  • 华为OD机试真题 Java 实现【服务中心选址】【2023Q1 100分 】

    一 题目描述 一个快递公司希望在一条街道建立新的服务中心 公司统计了该街道中所有区域在地图上的位置 并希望能够以此为依据为新的服务中心选址 使服务中心到所有区域的距离的总和最小 给你一个数组 positions 其中 positions i
  • 苏宁图书爬虫第一版

    最近一直在忙于工作 当我知道这些都是借口 毕竟某些博主大佬深夜还在更新订阅号更新微博 或许这就是自制力的差距吧 不啰嗦了 今天要写的主要是一篇关于如何爬取 苏宁图书 当然只是半成品 但是大部分问题都已经解决 在这里记录一下发生过的问题 以免
  • 专题五 Redis高并发场景

    介绍 Redis高并发场景 如果直接去学会比较抓不住头绪 因此本文将一步步介绍Redis的高并发的步骤演进 首先解释synchronized不适合在分布式场景 因为synchronized只适用自身的JVM 因此在分布式场景下多台机器的情况
  • 用IEDA开发WEB项目发生的java.lang.NoClassDefFoundError解决方法

    编译的时发生了这个问题 然后上网上百度了一下 一下出自于别人的博客 一 第一种 也是新手容易犯的错误 那就是classpath环境变量配置错误 这个错误在我最开始学习Android的时候就遇到过 弄的焦头烂额的 解决办法 在系
  • 华为机试:计算某字母出现次数 (不区分大小写)

    一 题目 描述 写出一个程序 接受一个由字母 数字和空格组成的字符串 和一个字母 然后输出输入字符串中该字母的出现次数 不区分大小写 字符串长度小于500 输入描述 第一行输入一个由字母和数字以及空格组成的字符串 第二行输入一个字母 输出描
  • 【华为OD机试】数字最低位排序【2023 B卷

    华为OD机试 真题 点这里 华为OD机试 真题考点分类 点这里 题目描述 给定一个非空数组 列表 起元素数据类型为整型 请按照数组元素十进制最低位从小到大进行排序 十进制最低位相同的元素 相对位置保持不变 当数组元素为负值时 十进制最低为等
  • 集合引用类型 下

    目录 Map Map set Map get Map delete Map has Map values Map entries Map clear 选择Object 还是Map 数据转换 转为数组 转为 JSON 对象转为 Map 数组转
  • 【Matlab】系统的响应分析

    前言 一个信号系统课程中使用Matlab对系统的零状态响应 零输入响应 完全响应 冲激响应 阶跃响应求解 波形生成以及分析的实验 一 内容 设系统的微分方程为 激励为 起始状态条件为 可求得 零输入响应 零状态响应 完全响应 冲激响应 阶跃
  • 攻防世界web新手题解题writeup

    攻防世界web新手题 1 view source 题目描述 X老师让小宁同学查看一个网页的源代码 但小宁同学发现鼠标右键好像不管用了 题目场景 http 220 249 52 133 58537初级题 按下F12查看网页源码得到flag 2
  • vue自定义指令实现复制功能

    思路 使用浏览器自带的execCommand使用Copy 但此方法只能是被选中的值才能进行复制粘贴 动态创建一个文本域 将拿到的文字放在文本域中 然后自动选中 再调用浏览器方法即可 提示 想要选中文本框的内容 有如下两个方法可以 方法一 通
  • 用python画一束满天星花朵,python满天星绘制流程图

    大家好 小编来为大家解答以下问题 用python画一束满天星花朵 python满天星绘制流程图 今天让我们一起来看看吧 1 用python画一百个同心圆的代码 import matplotlib pyplot as plt from mat
  • u盘文件删除如何恢复呢?

    相信很多上班族都有自己的u盘 u盘是用来储存一些我们可以随身携带的数据的 无论是学习还是工作 只要用电脑 都需要使用u盘 而u盘就是一个小容器 可以装一些重要的文件 方便我们随身携带 当u盘里的文件在使用u盘的过程中不小心被删除了 怎么恢复
  • selenium的安装及使用介绍

    R爬虫之上市公司公告批量下载 selenium的安装及使用介绍 http yphuang github io blog 2016 03 01 Get Listed Company Announcement
  • 【超简单】使用TensorFlow训练和部署图像分类模型

    一 简介 使用TensorFlow和OpenCV实现图像分类 按照流程图运行程序 可以非常简便地完成图像预处理 生成数据集 训练模型和部署模型 四个程序的功能如下 preprocess py 对图像进行重命名和调整大小 建议拍摄形状为正方形
  • 数据流图学习

    数据流图或数据流程图 Data Flow Diagram 缩写为DFD 是什么 数据流图是结构化分析方法中使用的工具 它以图形的方式描绘数据在系统中流动和处理的过程 由于它只反映系统必须完成的逻辑功能 所以它是一种功能模型 标志了一个系统的
  • JavaScript中apply()和call()的区别和应用

    JavaScript中的每一个Function对象都有一个apply 方法和一个call 方法 这两个方法能够改变函数体内部 this 的指向 例如 fun1 call 或者fun1 apply 都是为了改变fun1函数内部的this指向
  • Java 实现 AES 对称加密算法的加解密

    Java 实现 AES 对称加密算法的加解密 前言 一 对称加密算法简介 1 对称加密 2 加密模式 3 填充模式 二 AES 加解密代码实例 1 生成 AES 密钥 2 AES 加解密 3 AES nonce 加解密 前言 文章字数比较多
  • uniapp 里折叠面板嵌套 uni-collapse 高度不能自适应解决办法