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

相关推荐
MengMeng_102321 分钟前
soc平台告警分析思路及chrome插件
前端·chrome·安全威胁分析
落落落洛克24 分钟前
WAIC 2026收官复盘:国产AI打通大模型、智能体、物理机器人全产业闭环
前端
小时代的大玩家33 分钟前
HarmonyOS新特性-沉浸光感在叠叠消小游戏中的落地实践
前端·harmonyos
hunterandroid35 分钟前
[鸿蒙从零到一] ArkUI 状态管理实战:从 @State 到 @Provide 与 @Consume
前端
Hilaku35 分钟前
为什么很多人觉得前端很简单?
前端·javascript·程序员
hunterandroid38 分钟前
[鸿蒙从零到一] ArkUI 列表与网格实战:List、Grid 与 LazyForEach
前端
李明卫杭州40 分钟前
Vue2 数组响应式为什么总"不更新"?深入源码对比 Vue3 的 Proxy 改造
前端·javascript·vue.js
索西引擎1 小时前
【React】useReducer 与 useState 的比较研究:复杂状态管理场景下的选型
前端·react.js·前端框架
hunterandroid1 小时前
前台服务适配与线上排查:通知权限、启动限制和任务保活
android·前端
我是大卫1 小时前
【图】React源码解析-从“上帝视角”俯瞰React的认知框架
前端·react.js·源码