v-if导致el-button的disabled属性动态修改失败,加key解决(虚拟列表+el-checkbox出现勾选/未勾选的闪现问题同理解决)

html 复制代码
<template v-if="isPrev">
  <el-button type="primary"size="small" @click="nextHandle">下一步:添加设备</el-button>
</template>
<template v-else>
  <el-button type="primary" size="small" :disabled="disabled" @click="sureHandle">保存</el-button>
</template>

使用 v-if 后,disabled属性无法动态修改,通过给el-button添加 key 值,可以修复这个问题:

html 复制代码
<template v-if="isPrev">
  <el-button type="primary"size="small" @click="nextHandle" key="next">下一步:添加设备</el-button>
</template>
<template v-else>
  <el-button type="primary" size="small" :disabled="disabled" @click="sureHandle" key="save">保存</el-button>
</template>

类似问题还有vue-virtual-scroller虚拟列表的el-checkbox,el-checkbox没有设置key属性时,在滚动虚拟列表时,会出现从已勾选区域滚动到未勾选区域,部分未勾选的el-checkbox会先勾选后取消勾选的现象。

相关推荐
葡萄架子6 分钟前
Python中的logger作用(from loguru import logger)
java·前端·python
Hi_MrXiao15 分钟前
前端实现图片压缩插件(image-compressorionjs)
前端
阿智@1122 分钟前
Node.js 助力前端开发:自动化操作实战
运维·前端·node.js·自动化
m0_748251721 小时前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·vue.js·ajax
上等猿1 小时前
Ajax笔记
前端·笔记·ajax
Amo 67291 小时前
css 编写注意-1-命名约定
前端·css
匹马夕阳1 小时前
详细对比JS中XMLHttpRequest和fetch的使用
开发语言·javascript·ecmascript
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS安康旅游网站(JAVA毕业设计)
java·vue.js·spring boot·后端·kafka·开源·旅游
长风清留扬2 小时前
小程序开发实战项目:构建简易待办事项列表
javascript·css·微信小程序·小程序·apache
程序员_三木2 小时前
从 0 到 1 实现鼠标联动粒子动画
javascript·计算机外设·webgl·three.js