vue3.0 element-plus 不同版本 el-popover 循环优化

7月前作者：_Subsequently 分类：Toy博客阅读(33) 违法举报

这篇具有很好参考价值的文章主要介绍了vue3.0 element-plus 不同版本 el-popover 循环优化。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

表格内循环el-popover

vue3.0 element-plus 不同版本 el-popover 循环优化,vue.js,javascript,前端

渲染以后的页面，数据量很大的时候页面会卡，生成的代码：

vue3.0 element-plus 不同版本 el-popover 循环优化,vue.js,javascript,前端

解决思路：将el-popover提出来，不参与循环，让el-popover只渲染一次

文章来源地址https://www.toymoban.com/news/detail-662745.html

1、以1.1.0-beta.24版为例（低版本）

红色下划线部分是关键点

vue3.0 element-plus 不同版本 el-popover 循环优化,vue.js,javascript,前端

v-popover的值与el-popover的ref值要一致

2、以2.3.9版为例（当前新版本）

与低版本不同， v-popover被弃用了

vue3.0 element-plus 不同版本 el-popover 循环优化,vue.js,javascript,前端

以官方文档为例

vue3.0 element-plus 不同版本 el-popover 循环优化,vue.js,javascript,前端

:virtual-ref 可以直接传dom，这样变得更简单了，主需要把需要操作的控件对应的dom直接赋值给变量，传给:virtual-ref就行，举例：

vue3.0 element-plus 不同版本 el-popover 循环优化,vue.js,javascript,前端

到了这里，关于vue3.0 element-plus 不同版本 el-popover 循环优化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

vue3 element-plus 实现图片预览

element-plus下有这么一个组件 el-image-viewer /，但是这个组件是没写在文档上面的，像普通组件一样使用即可可以通过点击按钮实现图片预览，而非el-image组件只能通过点击图片实现预览 2.1封装组件 2.3组件使用在需要使用的地方引入，然后使用即可，这不是重点，每个人使用的

2024年02月15日
浏览(44)
Vue3 封装 element-plus 图标选择器

效果一：效果二：效果一的这个是把全部的icon图标都让它显示出来，让我们自己选择说选图标 2.1. 全局注册 icon 组件 2.2. 组件实现 2.3. 使用效果二的这个是渲染后端返回的icon图标 3.1. 全局注册 icon 组件 3.2. 组件实现 3.3. 使用

2024年02月07日
浏览(48)
vue3+element-plus上传文件，预览文件

vue3+ts+element-plus上传文件，预览文件场景：使用element-plus的el-upload标签，手动上传文件,可预览docx,xlsx,pdf,jpg,jpeg,png(本地资源以及网络资源）。 1、使用el-upload标签检查上传文件的文件格式与大小上传的附件信息在fileList中，组装接口所需数据进行上传使用docx-preview插件预览

2024年02月11日
浏览(39)
vue3项目搭建并配置element-plus

安装完成后，输入如下指令查看vue的版本：选择一个要存放项目的目录，打开小黑窗输入如下命令：一开始输入项目名称或者默认vue-project，然后根据需求选择Yes/No 生成完项目后，输入如下指令： src/main.js里引入 index.css的文件位置根据实际情况写，也有可能是 const app后面加

2024年02月13日
浏览(47)
vue3 element-plus动态菜单及动态图标

引入element-plus 注册图标组件动态引入图标代码完整代码路由如下

2024年01月18日
浏览(31)
Vue3+element-plus实现后台管理系统

环境：node.js软件、Vs code、vite、elemnt-plus、windicss(样式框架） 1、首先，使用npm 命令构建项目（ vscode安装的插件 vscode中文显示插件 2、高亮提示插件volar 3、vue 3 sni 代码提示）快速上手 | Vue.js a. npm -v 查看node.js 版本 b. npm config get registry 查看注册镜像是

2024年02月09日
浏览(39)
新星计划打卡学习：VUE3引入element-plus

目录 1、安装element-plus 2、安装按需导入插件 3、修改配置文件 4、添加页面内容 5、保存并重启项目官网说要想使用element-plus需要先进行安装，并给出了三种安装方式，我选择了第三种。报错了：解决的办法：原因是没有安装pnpm，看此博主文章进行解决 https://blog.csdn.n

2024年02月16日
浏览(41)
(二) Vue3 + Element-Plus 实现动态菜单栏

系列介绍：Vue3 + Vite + TS 从零开始学习项目搭建：(一) Vue3 + Vite + TS 项目搭建实现动态菜单栏：(二) Vue3 + Element-Plus 实现动态菜单栏实现动态面包屑：(三) Vue3 + Element-Plus 实现动态面包屑实现动态标签页：(四) Vue3 + Element-Plus 实现动态标签页实现动态主题色切换(demo)：(五)

2023年04月23日
浏览(42)
vue3+element-plus 表单输入框无法输入

Element-Plus在进行reactive在对登录用户密码输入输入时失效，最后发现是el-form,在进行ref和model进行绑定的时候，绑定的属性名称都是一致的，导致界面无法输入，如下图所示都绑定的是：loginForm,代码入下图所示：此时界面操作输入框，是无法编辑的：而el-form修改的model=\\\"logi

2024年02月11日
浏览(33)
vue3中element-plus Upload上传文件

先上效果图：上传后：页面：我这里做个限制，仅限上传一个pdf文件，如果不需要可以去掉，更多api请参考官方upload上传官方文档 js部分：完结，撒花~

2024年02月13日
浏览(30)