关于Element-ui中el-table在谷歌和360极速浏览器的兼容问题

最新推荐文章于 2024-03-18 14:18:49 发布
最新推荐文章于 2024-03-18 14:18:49 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： Element 文章标签： 前端 css elementui
原文链接：https://ask.csdn.net/questions/7530228
版权

问题：

这个是正常的显示页面在谷歌浏览器

在这里插入图片描述

这个是变形后的效果在360极速浏览器 （添加或者编辑就布局错乱，刷新之后会变成正常）

在这里插入图片描述

解决办法：

/deep/ .el-table__header, /deep/ .el-table__body{
  width:100% !important;
}
参考文章：

https://ask.csdn.net/questions/7530228

公子扶苏210
关注
专栏目录
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
然而，在进行Element-UI版本升级时，可能会遇到一些兼容性或配置问题，导致组件无法正常工作，比如在本案例中提到的“el-table不显示空白问题”。以下是对这个现象的深入分析及解决策略。 首先，让我们了解可能的...
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
el-tree-table组件基于vue和element-ui，在 的实现基础上增加一些新特性。 并在此声明treetable的业务实现再来上述开源项目，如有冒犯，请及时联系。 共同依据element-ui的写成。 扩展主要包括：显示边框、固定高度...
element ui 兼容低版本浏览器
m0_37780367的博客
09-03 1万+
基于ES6的用Vue框架element ui写的页面，如果当需要解决兼容低版本浏览器时，会遇到在低版本浏览器中不显示效果，页面一片空白，但控制台也不报错，而在高版本可以正常显示的情况。 低版本效果： 高版本效果： 代码片段： <div id="app"> <el-tree :data="data" :props="defaultProps" @node-cli...
Vue+ElementUI 关于兼容浏览器的问题
小张的博客
11-02 7234
Vue+ElementUI适应IE浏览器 由于IE浏览器的特殊性，在Chrome或其他浏览器下编译好的程序，在IE下需做特殊的处理，所以IE这个物种的存在，对前端开发人员来说特别痛苦，最近在使用ElementUI前端框架开发项目的过程中就遇到了IE下显示不了的问题。现将解决方法记录如下： 1. 在项目中安装babel-polyfill npm install --save babel-polyfill 2. 在index.html里面加上 <meta http-equiv="X-UA-Compati
Vue+ElementUI适应IE浏览器
giscoder的博客
11-26 1282
问题 由于IE浏览器的特殊性，在Chrome或其他浏览器下编译好的程序，在IE下需做特殊的处理，所以IE这个物种的存在，对前端开发人员来说特别痛苦，最近在使用ElementUI前端框架开发项目的过程中就遇到了IE下显示不了的问题。现将解决方法记录如下： PS：ElementUI环境的搭建，请移步：https://www.jianshu.com/p/4585d43e9e14 解决方法 1.在项目中安...
elementui在ie9浏览器下的兼容性问题及解决方法
热门推荐
如影随风
10-29 1万+
1、el-select组件内在IE9中会出现下图样式错乱，解决办法： //select框固定下拉箭头兼容ie9 .el-select.el-input.el-input__suffix.el-icon-arrow-up{ -ms-transform:rotate(180deg)\0; } 2、IE9中elementui的message提示框会出现样式错乱，解决方法：...
vue+typescript+elementui浏览器兼容性1
wltsysterm的博客
03-19 629
背景 应公司战略需要，需要对一个使用了vue2.6.5+typescript3.9.3+elementui2.14.1的项目进行浏览器兼容性处理。 需要适配的浏览器包括： ie9-11 chrome（2019~） firefox（2019~） edge 搜狗（2019~） 360（2019~） qq（2019~） safri 现状 经过初步的测试，发现到了ie9，elementui仍然可以支持，但是部分组件的交互已经失真了，比如下拉框组件。 受限于csdn的现阶段的改版，不允许增加过
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
element-ui 中的table的列隐藏问题解决
10-18
Element-UI 是一个基于 Vue.js 的前端 UI 框架，它提供了丰富的组件来方便开发者快速构建现代化...通过以上知识，我们可以更加高效和优雅地解决 Element-UI 中 table 列的显示和隐藏问题，从而提升用户界面的交互体验。
el-data-table:element基于element-ui，轻松实现结界
05-13
创建el-data-table来解决业务问题，因此在其中设置了CRUD逻辑。 例如，要开发user api，请假设其相对路径如下： / api / v1 / users 宁静的CRUD API应该是： 取回 GET / api / v1 / users ? page = 1 & size = 10...
vue 脚手架 elementUi element-ui 兼容 ie 360 急速/兼容模式 完美处理
gaoqiang1112的博客
07-16 1万+
直接上干货 如果你用vue的脚手架弄的项目 那么恭喜你 要改的 也并不多 如果 是自己搭建的框架 那么 请滤清框架结构后 按我的方法操作即可 1 引入babel-polyfill npm install babel-polyfill --save 2 src下 mains文件 import 'babel-polyfill' 3 build文件夹下web...
Vue+Element浏览器兼容和一些实现function
我就是我是好孩子的博客
03-18 455
Element UI实现的一些方法
浏览器急速模式跟兼容模式导致网站显示不同的问题
VicCreator
05-08 1万+
我们知道有些浏览器在浏览网站的时候可以选择急速模式跟兼容模式，不同的模式可能导致页面不一样，原因是在兼容模式的时候浏览器会根据ie版本指定显示，但是我们知道在ie的开发者工具中浏览器模式跟文档模式不一样也对导致页面显示不一样，比如浏览器模式选择了ie8，但是文档模式可能还是默认ie7，网页显示的文档就会基于ie7显示，如果兼容性不好的网站就会出现布局混乱的问题。 处理方法： 服务器端兼容模式设
vue+typescript+elementui浏览器兼容性2
wltsysterm的博客
03-19 709
进展 经过数个demo的测试，初步得到结论：无需做特殊配置vue2+typescript+elementui就可以兼容上一篇说的浏览器 兼容性问题：外部插件并非es5版本的语法，导致ie兼容异常 针对该问题，vue也有对应的解决方案。配置也比较简单。解决问题的原理是这样的：由于vue-cli默认不会编译node-module下的所有的文件，而有时候我们一来的第三方插件都是安装在node-module下面，因此，我要做的就是告诉vue有一些包我们还是需要编译的。 比如，项目里头运用了如下的依赖：
elementui表格兼容safari浏览器防止错位
qq_57952018的博客
11-15 227
【代码】elementui表格兼容safari浏览器防止错位。
Element属性方法的浏览器兼容性概览
孙群
12-17 8055
参考自https://developer.mozilla.org/en-US/docs/Web/API/Element
Element-UI 在IE上的兼容问题
baidu_34478852的博客
06-25 3196
Element-UI 在IE上的兼容问题处理方案部分样式IE不兼容 例如 flex: 1 还要一些CSS3特性等element-ui的el-image兼容问题，显示图片不正常插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 部分样式IE不兼容 例如 flex: 1 还要一些CSS3特性等
兼容问题！Element UI table组件部分浏览器表头边框不对齐
zhuang_li_quan的博客
08-28 523
今天使用elementUI框架开发时，发现表格组件存在浏览器兼容问题，表格边框会对不齐，如图所示： 解决方案：在App.vue添加以下代码 <style lang="scss"> body .el-table th.gutter { display: table-cell !important; } </style> 这样就完成啦，解决了麻烦点个赞噢！！！ ...
关于vue +element-ui 与谷歌浏览器最新版的兼容问题
StreakerHan
11-12 7844
关于vue element-ui 与谷歌浏览器最新版的兼容问题 最近在开发中遇到的问题：将vue+elementui 的程序打包放到服务器上之后，在最新版本的谷歌浏览器中不能显示二级菜单，但是在旧版本的谷歌浏览器中就能正常显示。F12后发现二级菜单的透明度变成了1%。 出现问题的原因： 上面是错误的css样式，透明度的表达方式是 % 解决问题的方法： 将透明度的表达方式换成小数点即可。 总...
如何配置和解决Vue element-ui中el-table操作列的样式问题？
最新发布
10-22
在Vue中使用Element UI的`el-table`组件时，如果想要自定义操作列的样式，可以按照以下步骤进行配置： 1. 定义数据结构：首先，确保你的表格数据结构包含操作列需要的信息，通常这会是一个包含状态、标识符等字段的对象数组。 2. 配置列：在`<el-table-column>`标签内，你可以创建一个操作列，比如这样： ```html <template> <el-table-column type="action" label="操作"> <template slot-scope="{row}"> <!-- 指定操作按钮的HTML内容，这里使用v-if展示条件 --> <el-button v-if="showEditButton(row)" @click="editRow(row)">编辑</el-button> <el-button v-if="showDeleteButton(row)" @click="deleteRow(row)">删除</el-button> </template> </el-table-column> </template> <script> export default { data() { return { showEditButton: () => true, // 初始显示编辑按钮的函数 showDeleteButton: () => false, // 初始显示删除按钮的函数 }; }, methods: { editRow(row) { // 实现编辑操作的逻辑 }, deleteRow(row) { // 实现删除操作的逻辑 } } }; </script> ``` 注意：在这里，`showEditButton` 和 `showDeleteButton` 是你可以根据实际情况动态控制是否显示对应按钮的函数。 3. 样式定制：如果你想要改变按钮的样式，可以在`.vue`文件中的`style`部分添加CSS规则，或者将样式放在单独的`styles.css`文件里并引入。例如： ```css .el-button--default { background-color: #007bff; color: white; /* 添加其他你想要的样式 */ } /* 或者针对某个特定的状态修改样式 */ .el-button.is-edit { background-color: #28a745; } ``` 4. 动态切换按钮样式：如果你想根据行的数据状态来切换按钮样式，可以在相应的`data`函数或者计算属性中返回不同的状态字符串，然后在`v-bind:class`上绑定这个状态，如： ```html <el-button class="custom-btn" :class="{ 'is-edit': row.editStatus === 'enable' }">编辑</el-button> ``` 结合以上步骤，你应该能成功地配置和自定义操作列的样式了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值