vue3 uview-plus Collapse 折叠面板高度自适应问题

需求： Collapse面板的数据是动态获取的，并且面板中的数据会有增删的操作，所以需要面板能自动适应内容的高度，避免出现高度不够内容显示不全，或多出一截空白的情况
思路： 通过ref获取面板，并调用uview提供的方法init()重新初始化内部高度计算

通过ref和init()重新初始化面板高度

通过ref获取Collapse面板，然后在数据改变时重新初始化面板高度，需要注意的是，vue3中使用ref获取元素的方法和nextTick的调用与vue2有所不同

<u-collapse
		ref="collapse"
		@open="getAcquirerAddress">
			<u-collapse-item>
			......
    		</u-collapse-item>
</u-collapse>

<script setup lang="ts">
import { ref,nextTick  } from 'vue';
  //获取Collapse面板，变量名要与ref值相同
  const collapse = ref<any>(null);
  //折叠面板高度自适应
  const initCollapse = ()=>{
	//在下一次页面刷新中重新初始化面板高度
	nextTick (()=>{
		collapse.value.init();
	})
  }

  //获取地址列表
  const getAcquirerAddress = ()=>{
	acquirerApi.getAcquirerAddress().then((res:any)=>{
	       ............
		initCollapse();//获取数据并赋值后，重新计算面板高度
		
	})
  }
  //点击标签，删除地址
  const clickTab =(addressId:number,index:number)=>{
          acquirerApi.deleteAddress(addressId).then((res:any)=>{
          ..........
         initCollapse();//删除数据后，重新计算面板高度
		})
  }
</script>

解决重新计算高度后面板收缩问题

面板初始化后会自动收缩，体验不好，如下所示。

发现初始化后默认展开的面板不会收缩，而且现在的Collapse面板也只使用一个Collapse-item，那只要把这个item设置为默认展开就好了。但是第一次进到页面的时候不希望这个面板自动展开，所以添加一个变量collapseOpen，当用户点击面板展开时，就把这个面板设置为默认展开的，这样初始化后就不会收缩了。完整代码如下

<-- :value="['open']" 的意思是，当u-collapse-item的name为open时该item默认展开-->
<u-collapse
       :value="['open']"
		ref="collapse"
		@open="getAcquirerAddress">
			<u-collapse-item
			:name="collapseOpen"
			>
			......
    		</u-collapse-item>
</u-collapse>

<script setup lang="ts">
import { ref,nextTick  } from 'vue';
  //获取Collapse面板，变量名要与ref值相同
  const collapse = ref<any>(null);
  //collapseOpen 的初始值不是"open"，所以不会默认展开
   const collapseOpen = ref("");
  //折叠面板高度自适应
  const initCollapse = ()=>{
	//在下一次页面刷新中重新初始化面板高度
	nextTick (()=>{
		collapse.value.init();
	})
  }

  //获取地址列表
  const getAcquirerAddress = ()=>{
	acquirerApi.getAcquirerAddress().then((res:any)=>{
	       ............
	     //赋值为open，这样在重新计算面板高度后面板就不会收缩，问题解决
	    collapseOpen.value = "open";
		initCollapse();//获取数据并赋值后，重新计算面板高度
		
	})
  }
  //点击标签，删除地址
  const clickTab =(addressId:number,index:number)=>{
          acquirerApi.deleteAddress(addressId).then((res:any)=>{
          ..........
         initCollapse();//删除数据后，重新计算面板高度
		})
  }
</script>

最终效果如下