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会先勾选后取消勾选的现象。

相关推荐
小飞侠在吗几秒前
vue 生命周期
前端·javascript·vue.js
魂祈梦几秒前
ElementUI组件出现大量重复样式
vue.js·element·scss
cindershade3 分钟前
Vue3 + Keep-Alive:实习中遇到的 window 滚动问题与实践
vue.js
小王码农记36 分钟前
CSS中自定义属性函数var()
前端·css·vue.js
泉城老铁44 分钟前
springboot+vue 如何实现海康摄像头喊话功能
前端·vue.js·后端
一 乐1 小时前
美食推荐|基于springboot+vue的美食分享系统设计与实现(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·美食
WX-bisheyuange1 小时前
基于Spring Boot的电影院购票系统设计与实现
前端·javascript·vue.js·毕业设计
聊天QQ:688238861 小时前
基于Matlab与Simulink的滑模控制六自由度水下机器人运动模型:无缝轨迹跟踪,含S-f...
vue.js
qq_12498707531 小时前
基于springboot+vue+mysql的校园博客系统(源码+论文+部署+安装)
java·vue.js·spring boot·mysql·毕业设计
通义灵码1 小时前
用 Qoder 加速前端巨石应用的架构演进
前端·人工智能·架构·qoder