项目场景点击展开卡片卡片内容为echart的图表。默认不展开卡片。问题描述点击展开后内容 空白不显示图表。原因分析因为默认不展开因此图表无法直接渲染需要添加对应的方法去渲染图表。虽然页面在一开始就获取了图表所需的数据甚至可能已经做了初始化。但是要注意此时卡片并没有展开因此dom没有所以初始化是失败的就导致了点击展开以后内容空白图表无法渲染。解决方案需要根据卡片展开去渲染数据有两个方法可以去做一watch监听卡片的展开监听到展开以后进行图表渲染二添加卡片的点击事件在点击事件里面添加渲染逻辑方法一watch处理逻辑用户点击 collapse 标题↓van-collapse 内部修改 activeNames展开↓watch 监听到 activeNames 变化↓$nextTick等待 DOM 更新完成↓面板已展开容器有宽高↓初始化图表↓渲染成功特点 van-collapse 自主改变数据watch 被动响应逻辑自然。这里是监听到卡片展开的消息就出发了watch代码块使用$nextTick是为了确保dom更新完成使得图表渲染所需的高宽存在否则图表可能会渲染失败ctiveNames (newValue) { // 监听 1卡片 是否被展开 if (newValue newValue.includes(1)) { this.$nextTick(() { if (this.completionChart) { // 图表已存在调整尺寸 this.completionChart.resize() } else if (this.completionChartReady) { // 数据已加载立即初始化图表 this.initCompletionChart() } }) } }方法二点击事件处理逻辑用户点击↓click handler 执行同步1. this.activeNames [1] → 主动改变数据2. this.$nextTick(() { → 等待 DOM 更新完成initCompletionChart() → 面板已展开容器有宽高})↓渲染成功1、用 van-collapse 的 change 事件van-collapse v-modelactiveNames changeonCollapseChange van-collapse-item name1 template #title div classfirstContentTitle0 span classfirstContentTitle1 van-image :srcrequire(/assets/icon/ico_two_done.svg) / /span span classfirstContentTitle2各分公司完成情况/span /div /template div classfirstContentFrame div classchart-container refcompletionChart/div /div /van-collapse-item /van-collapse2、对应的methodmethods: { onCollapseChange() { if (this.activeNames !this.activeNames.includes(1)) { this.activeNames.push(1) this.$nextTick(() { if (this.completionChart) { this.completionChart.resize() } else if (this.completionChartReady) { this.initCompletionChart() } }) } } }错误示例点击事件逻辑和watch处理代码一致图表在第一次展开的时候会是空白第二次展开才能正常渲染methods: { onCollapseChange() { if (this.activeNames this.activeNames.includes(1)) { this.$nextTick(() { if (this.completionChart) { this.completionChart.resize() } else if (this.completionChartReady) { this.initCompletionChart() } }) } } }错误原因因为点击事件发生时卡片的展开标识还没有更新而是优先执行点击事件的逻辑顺序如下用户点击-执行代码块-更新卡片展开标识由此可知此时activename并没有‘1’所以其实无法执行代码块就算不加if (this.activeNames this.activeNames.includes(1))的判断他也无法成功渲染因为卡片并没有成功展开呢dom没有更新没有高宽给到echart渲染图表解决方案点击事件代码块手动修改卡片展开标识-dom更新完毕-渲染图表总结watch直接监听到卡片展开标识更新以后才执行watch代码块要注意使用$nextTick等待dom更新完成以后再执行echart渲染是因为echart渲染强关联dom的高宽否则直接执行是可以的点击事件则是先触发点击事件代码块才到更新展开标识。按照这个逻辑首次展开是无法获取图表渲染所必须的高宽因此无法成功所以需要将展开标识的更新前置到点击事件代码块然后后面逻辑与watch一致dom更新图表渲染两者逻辑上略有不同因此操作也略不同