uview2.0的折叠面板高度自动撑开（单个折叠、多个折叠都适用）

情况一：单个折叠面板

下面是模板

<u-collapse :class="[openFlag ? 'open-flag' : '']" ref="collapse" accordion :border="false" @close="closeCollapse" @open="openCollapse">
	<u-collapse-item ref="collapseItem" title="标题" name="optional">
		<!-- 你的折叠内容 -->
	</u-collapse-item>
</u-collapse>

下面是js代码

export default {
	data() {
		return {
			openFlag: true,  // 默认展开
		};
	},
	methods: {
		// 关闭折叠面板的时候，把标志位改为false == 这样才能够高度为0
		closeCollapse() {
			this.openFlag = false;
		},
		// 打开折叠面板的时候，把标志位改为true == 这样高度为auto
		openCollapse() {
			this.openFlag = true;
		}
	}
}

下面是样式

<style lang="scss" scoped>
	// 让 有 open-flag 这个类名的 折叠面板 高度自动撑开
	.open-flag /deep/.u-collapse-item__content {
		height: auto !important;
	}
</style>

以上是单个折叠面板的情况，只需要一个标志位openFlag去控制高度是否为自动的即可

情况二：多个折叠面板

下面是模板

<u-collapse :value="showValueList" @close="close" @open="open">
	<!-- showOpenFlagList[index] 这里的 index 就是代表第几个展开 -->
	<u-collapse-item :class="[showOpenFlagList[index] ? 'open-flag' : '']" v-for="(item, index) in dataList"
		:title="item.name" :name="index">
		<view class="content-wrap" v-for="data in item.itemData" :key="data.id">
			<view class="title">{{data.name}}</view>
			
		</view>
	</u-collapse-item>
</u-collapse>

下面是js代码

export default {
	data() {
		return {
			dataList: [],  // 数据： [ {itemData: [{ id: '', name: '', ... }, {}, {}, ...], name: '标题1'}, {itemData: [], name: '标题2'},  ... ]  
			showValueList: [],  // 同 u-collapse-item 的 name 数组， 本文例子 的格式是 [0, 1, 2, ..]  
			showOpenFlagList: [],  // 多少个 u-collapse-item 长度就是多少
		};
	},
	methods: {
		async getData() {
			const params = {
				keyPlaceName: this.keyword,
				// order: this.order,
				// ...pagination
			};
			const res = await smKeyPlaceList(params);
			if (res.success && Array.isArray(res.result)) {
				this.dataList = res.result;
				// 遍历结果数组
				this.showValueList = res.result.map((elem, index) => {
					// 这就意味着 标志位 有多少 -- 这里是默认全为true，即表示全部展开
					this.showOpenFlagList.push(true)
					// u-collapse-item 的 name  就是 index 
					return index
				});
			}
		},
		close(value) {
			// 这里的value就是你点击收起来的折叠面板的name，因为name我设置为index，所以可以直接用value来找到下标对应的标志位
			this.showOpenFlagList[value] = false;
			// 这是防止 直接修改的时候 数据修改了 模板没反应过来
			this.showOpenFlagList = [...this.showOpenFlagList]
		},
		open(value) {
			this.showOpenFlagList[value] = true;
			this.showOpenFlagList = [...this.showOpenFlagList]
		}
	}
}

下面是样式

<style lang="scss" scoped>
	// 让 有 open-flag 这个类名的 折叠面板 高度自动撑开
	.open-flag /deep/.u-collapse-item__content {
		height: auto !important;
	}
</style>

结论：上述两种方法有一点弊端，就是height为auto的时候，过渡动画是感受不到的，所以当从关闭到展开的过程，这个过程就没有过度动画了