u-collapse组件折叠栏展示不全问题-CSDN博客

本文链接：https://blog.csdn.net/weixin_73610394/article/details/135658772

文章讲述了在使用Vue框架的u-view组件中的u-collapse进行动态渲染联系人数据时遇到的高度计算错误，通过添加ref并监听change事件，以及在方法中计算折叠栏高度来解决此问题的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：使用u-view组件u-collapse，动态渲染联系人数据时有时候会高度计算错误，多次请求后，折叠栏展示不全

解决方案：

1.给折叠栏加ref,利用change事件监听展开

<u-collapse v-for="(item,index) in personData"  @change="handleOpenChange">
<u-collapse-item :title="item.deptName" :open="index==0" ref="collapseHeight">
			<uni-table  :border="false">
						<uni-tr>
							<uni-th width="130rpx" style="color:#1a3189;">负责人</uni-th>
							<uni-th width="330rpx" style="color:#1a3189;">区域</uni-th>
							<uni-th style=" color:#1a3189;">电话</uni-th>
						</uni-tr>
						<uni-tr v-for="(i,index1) in item.persons" :key="index1">
							<uni-td style=" ">{{i.userName}}</uni-td>
							<uni-td style=" ">{{i.areaName}} </uni-td>
							<uni-td style="">
								<a :href="'tel:' + i.phoneNumber">{{i.phoneNumber}}</a>
							</uni-td>
						</uni-tr>
					</uni-table>
				</u-collapse-item>
			</u-collapse>

2.methods中加handleOpenChange函数，计算高度

发送完请求之后调用一下次函数

 methods: {
    // 计算折叠版高度
    handleOpenChange() {
      let long = this.$refs.collapseHeight.length;
      setTimeout(() => {
        for (let i = 0; i < long; i++) {
          this.$refs.collapseHeight[i].queryRect();// 计算高度
        }
      }, 50)
  },