element组件不报错但不起效——table菜单&&preview-src-list图片预览

已于 2022-05-04 10:36:01 修改
阅读量1.6k 收藏
点赞数
文章标签： elementui vue.js 前端
于 2022-05-03 16:28:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49621156/article/details/124557006
版权

1、直接npm安装elementUI会导致版本太高不能正常使用table菜单的一些内容

2、查阅资料说安装低版本（2.9.2）可正常使用table菜单，亲测有效

3、但在2.9.2版本下不支持图片放大预览效果，所以根据官网的组件手册，安装了2.11.1版本，可以正常使用以上两种组件啦

卸载命令：

npm uninstall element-ui

安装指定版本（这里安装2.11.1）

npm install element-ui@2.11.1 -S

！！！@符之前千万不能有空格，不然会报错

Margherita H
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
Element-UI升级后，el-table不显示 空白问题 备份包
基于Element-UI 的二次封装图片上传组件
05-06
1、包含上传图片，pdf大小校验。 2、上传数量限制。 3、上传进度条。 4、可触发Form表单校验，使用方法与其他表单元素一致 5、大图预览功能 父组件直接使用 v-model 绑定图片上传组件。
el-image大图预览踩坑
dragonzoebai的专栏
07-27 2863
el-image 多图片预览遇到的问题及按钮触发预览
preview图片预览失效
m0_67021283的博客
06-21 869
1. 正常使用preview图片组件预览图片，点击图片无效。但是在table表格外面写一个img标签可以正常预览。说明动态获取数据时出现问题。2.解决办法，获取table表格数据后异步刷新一下。异步刷新数据，否则无法预览。
调整element-ui中preview-src-list大图预览的样式
Fatfish_tree的博客
09-08 3452
调整这个样式在引入的element-ui 全局样式中去写才能生效，只需要调整图片的大小即可 .el-image-viewer__img{ width: 50%; height: auto; }
el-image使用预览属性preview-src-list元素显示在父组件，预览图片出现闪烁的问题
呆子小木心的博客
05-25 4285
elementUI组件中使用el-image的预览属性preview-src-list
ElementUi按需引入，Table使用失效
weixin_44143279的博客
12-08 1846
按需引入方式见博主这篇推文 https://blog.csdn.net/weixin_44143279/article/details/110648868 element-ui按需引入，Table表格无法显示 解决方法：降低element-ui版本 1、手动修改package.json 2、删除node_modules 给大家推荐一个快速删除node_modules的插件 安装（推荐全局安装）： npm install -g rimraf 使用： rimraf node_modules 3、重新安装
Element UI el-table数据不生效问题
m0_63451467的博客
01-26 529
Element UI el-table数据不生效问题，同一个组件里别的表格生效了而这个表格没生效
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue element upload组件 file-list的动态绑定实现
10-16
主要介绍了vue element upload组件 file-list的动态绑定实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue element-ui table 组件封装使用
最新发布
06-07
vue 在使用elementui的时候，table 会使用许多次，显示内容也不一致，封装之后，只需要配置就可以使用了，此资源仅适配了我常用的，如有其他需要，请自行修改
使用el-image后端返回路径,显示没问题点击预览图片无效
weixin_60623799的博客
01-04 1104
el-image,:preview-src-list="srcList",previewSrcList,开启预览大图的功能
引入element ui， 组件生效，但是部分样式未生效
Dasy_R的博客
11-14 1040
element UI按需引入的时候， 组件生效，但是部分样式未生效。
在做项目时遇到的问题：ElementUI按需引入的问题
weixin_51938803的博客
04-15 575
二、还有一个就是ElementUI中的MessageBox 弹框按需引入出现的错误，一开始我以为和其他组件一样是通过import {MessageBox} from 'element-ui'引入，然后再通过Vue.use(MessageBox)注册使用，但这种做法是错误的，然后就报如下图的错误。在这次的项目实战中自己遇到了像这样在使用ElementUI中的问题，自己也通过不断查询资料，然后一步一步解决它，很开心，自己在解决问题中学习了知识。1.页面刷新会出现空白的弹窗。
vue preview图片预览中的坑
qq_41730816的博客
06-24 2573
vue preview图片预览中的坑 为了修改样式方便，先给vue-preview组件添加一个类pc_thumb 发现图片太大了 接下来修改样式让图片变小 后面发现样式并没有变化，经过一番检查发现是样式表scoped属性的问题，大概就是使样式私有化，避免污染全局，这也是组件的思想，互不影响，但是有时父组件需要影响子组件，这时有2种方法 1：再加一个不含scoped属性的style标签，vue组件允许多个style标签 但是尽量避免太多样式，防止污染 2：深度作用选择器，‘>>>’
vue加载图片失败解决方法
qq_41395120的博客
05-13 2629
在vue项目中，我们引用图片组件 el-image 绑定路径会提示加载失败，如下图所示 <el-image class="zuipinImg" src="@/assets/photo.png" :preview-src-list="zuopinsrcList"> </el-image> 解决方案 1、使用绝对路径 <el-image :src="'https://fuss10.elemecdn.com/e/5d/4a73
Element-ui中的el-image的图片预览功能（:preview-src-list）
热门推荐
CSDN_XHC的博客
05-20 2万+
今天用了element-ui中的图片预览功能，但是它的图片预览功能只能预览事先定义的图片，与我的业务功能完全不符，我的业务功能是当点击图片时，就预览当前点击的图片。 所以我将其修改了一下，功能就是当点击一行表格中的一个图片时，这个图片就被预览了，代码很简单，就是直接复制element-ui中的图片预览组件就行 <el-table-column label="员工照片" align="center"> <template slot-scope="scope"&gt..
vue element 单张图片上传，删除，预览
凡尘
06-16 2398
vue element 图片上传，删除，预览，图片大小，格式校验
el-image打开预览弹窗第一张不显示问题
qq_43251098的博客
07-20 1364
今天本来想直接用引入element内部隐藏的el-image-viewer预览图片组件，在谷歌浏览器没有问题，但在ie浏览器中（10、11）页面加载不出来，于是还是打算采用api里面的el-image图片组件，但是当时没有太注意，直接把src删掉了，又或者src赋值的空值，导致el-image打开预览弹窗第一张不显示问题。 官方源码： <div class="demo-image__preview"> <el-image style="width: 100px; hei
element ui 的preview-src-list 图片放大效果怎么使用
03-25
A: 使用element ui的preview-src-list可以方便的实现图片的预览和放大效果。具体使用步骤如下： 1. 在需要显示图片的位置（例如img标签）中，添加preview-src-list属性，例如： ``` <img preview-src-list="url1,url2"> ``` 2. 在Vue组件的methods中添加预览方法，例如： ``` previewImage(url) { this.$preview(url); } ``` 3. 在Vue组件的mounted中初始化Preview组件，例如： ``` mounted() { const previewOptions = { fullscreen: false, // 是否全屏显示 options: { loop: true }, // 配置图片预览组件参数 onClose: () => console.log('关闭了图片预览'), // 监听关闭事件 }; const Preview = window.ElementUI.Preview; this.$preview = Preview.show.bind(null, previewOptions); }, ``` 注意，在初始化Preview组件时需要引入Element UI的Preview组件。以上代码仅为示例，具体的实现方式可以根据项目需求进行修改。 4. 在模板中使用预览方法，例如： ``` <img v-for="url in imageList" :src="url" :key="url" @click="previewImage(url)"> ``` 此时，点击任意一张图片即可弹出预览窗口，并实现放大效果。 以上就是使用element ui的preview-src-list实现图片放大效果的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值