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

相关推荐
Monly211 分钟前
Vue:Form正则校验
前端·javascript·vue.js
向明天乄4 分钟前
Maotu流程图编辑器:Vue3项目中的集成实战与自定义流程开发指南
javascript·编辑器·vue·流程图
码上奶茶7 分钟前
HTML 标签
前端·html·标签·路径·超链接·双标签·单标签
全宝15 分钟前
🔢前端解决浮点数运算精度丢失的问题
前端·javascript
前端双越老师21 分钟前
学不动了?没事,前端娱乐圈也更新不动了
javascript·react.js·ai编程
江城开朗的豌豆22 分钟前
JavaScript篇:偷懒也有理!事件代理让我少写一半代码
前端·javascript·面试
云浪37 分钟前
掌握 CSS 倾斜函数
前端·css
ai产品老杨44 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
唐诗1 小时前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码1 小时前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发