最近自己从零撸了一个甘特图组件,如图
当切换 "月/时/日" 的时候,我希望下面的甘特图重新渲染,页面结果是这个样子
<template>
<div v-if='tasks' class="content">
<template v-for='(item,index) in tasks'>
<div :key="index + '_task'" style="border-top: 1px solid #cecece;margin:-2px 0px -1px -1px;"></div>
<div v-if='tasks' class="barRow" v-bind:style="{ height: rowHeight + 'px'}" :key="'task_' + index + '_' + minHeaderWidthUnit">
<bar :key= "'row_' + index + '_' + minHeaderWidthUnit" v-if='startGanttDate && endGanttDate' :startGanttDate='startGanttDate' :endGanttDate='endGanttDate' :row='item' :rowHeight='rowHeight'></bar>
<template v-for='count in timelineCellCount'>
<div class="cell" :key= "'row_' + index + '_cell_' + count" v-bind:style="{ minWidth: minHeaderWidthUnit + 'px',maxWidth: minHeaderWidthUnit + 'px',height: rowHeight + 'px' }"></div>
</template>
</div>
<div :key="index" style="border-top: 1px solid #cecece;margin:0px 0px 1px -1px;"></div>
</template>
</div>
</template>
我希望bar组件能重新渲染,刚开始我没有给 bar 设置 key,我没有考虑性能问题,就单纯使用了 v-if,this.$forceUpdate() 均都无法奏效,UI 没有渲染,后来找到 一篇文章 ,他里面总结了四点,最后我更改了key,组件成功刷新了,大家可以深度学习一下Vue底层渲染机理
- 简单粗暴的方式:重新加载整个页面
- 不妥的方式:使用
v-if
- 较好的方法:使用Vue的内置
forceUpdate
方法 - 最好的方法:在组件上进行
key
更改
原文地址:https://blog.csdn.net/lee576/article/details/123250037
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。