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

相关推荐
用户059540174462 分钟前
用了半年 LangChain Memory,才发现回滚测试压根没测对
前端·css
木木的木云6 分钟前
从零构建微前端框架:PavilionMfe 设计揭秘
前端·架构·vite
weedsfly13 分钟前
Cookie 安全三属性:HttpOnly、Secure、SameSite 分别防什么?
前端·javascript·面试
IT_陈寒15 分钟前
SpringBoot自动配置没生效?你可能漏了这个注解
前端·人工智能·后端
monologues16 分钟前
Vue3 底层原理深度解析:从编译到运行的源码之旅
前端
前端炒粉31 分钟前
马克思主义基本原理在Vue框架中的指导作用探析
前端·javascript·vue.js
happyprince44 分钟前
12-vLLM 量化方案全面分析
前端·javascript·vllm
必胜刻44 分钟前
从零搭建全栈博客系统:Go + Vue 3 + Docker 全流程实战
vue.js·docker·golang
大圣编程1 小时前
python break语句
开发语言·前端·python
EntyIU1 小时前
Vue History 模式配置文档
前端·javascript·vue.js