element-ui的el-table在1280x1024下不显示横向滚动条

如图图片说明,更改了浏览器窗口大小之后又出现了,如图:图片说明,设定的table宽度是100%,不知道什么原因,请大神赐教!

0

1个回答

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
记一次element-ui配置化table组件的适应性问题(横向滚动条)
本来想在 jsfiddle 重现下的,结果没有成功,就给大家看截图吧 vue版本:2.5.3 element-ui版本:1.4.13 浏览器:chrome 66.0.3359.170 大家可以发现,固定了高度的 table 不仅出现了纵向滚动条,横向滚动条也出现了(只能滚动一点点),其实宽度是足够显示的。 然后将问题在网上搜寻,查到了相关的issues https://github...
解决 Vue element ui 的table水平滚动条固定底部
前提条件,需求: 使用vue element UI 的table 由于横向数据比较长,小屏幕电脑会出现水平滚动条,假如每页20条数据,那么我想对第一条数据进行操作,我得先滚动到table最下面,再拉动水平滚动条到最右边,再回滚到最上面,对末尾的操作进行点击。 这样操作太繁琐,所以提出需求:屏幕过小出现水平滚动条时候,将table的水平滚动条固定再屏幕底部。 element ui 的table并...
设置element-ui Table滚动条样式
1.首先,安装包 npminstallperfect-scrollbar--save 2.引入 //引入核心框架 import Vue from 'vue'; //插件的包 import PerfectScrollbar from 'perfect-scrollbar'; //对应的css import "perfect-scrollbar/css/perfect-scro...
关于element-ui中使用el-scrollbar包裹el-tree时横向滚动条不显示的问题
在全局style中给节点文字父元素加padding撑开,然后设overflow为visible即可 .el-tree-node :nth-child(2) { padding: 1px; overflow: visible; }
element table表格 下方出现滚动条
如果element  table在不该出现滚动条的情况下出现了滚动条,那么,请注意你的reset.css文件table { border-spacing: 0; border-collapse:separate;/* 如果值为collapse,则element表格下方会出现滚动条*/ }...
element-ui中的表格el-table滚动条样式修改
可以参考看看: // 滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 6px; // 横向滚动条 height: 6px; // 纵向滚动条 必写 } // 滚动条的滑块 /deep/ .el-table__body-wrapper::-webkit-scrollbar-...
element ui table 滚动条回到顶部、底部
element ui table 添加数据行后滚动条滚动到对应的行头或行尾问题; 滚动到第一行: this.$refs.table.bodyWrapper.scrollTop =0; 滚动到最后一行: this.$refs.table.bodyWrapper.scrollTop =this.$refs.table.bodyWrapper.scrollHeight; ------------...
记一次el-table内容溢出元素框时不出现滚动条问题
最近,博主在使用elementui实战时遇到了一件怪事。首先,先看下博主的浏览器窗口最大化截图: 再看一下缩小之后的截图: 博主的表用使用的是elementui的el-table标签,发现此时的表格内容已经溢出了元素框,但是并没有出现滚动条。博主被这个问题困扰了两天,后来终于找到了问题原因和解决方法。 问题原因: 简单贴一下原布局样式: //包括左侧导航栏和右侧内容主体 .remain {...
elementUI树状图竖向滚动条和横向滚动条问题
在使用vue时,就会有使用到elementUI,之后就是不断的在入坑和天坑之间徘徊。 elementUI中有个隐藏的组件,就是滚动条-----<el-scrollbar></el-scrollbar> 可以参考elementUI的官网代码 这里用F12可以查看到 添加之后会有出现横向滚动的样式(很丑) 这里需要添加一个样式  .el-scrollbar .el-...
vue element隐藏组件滚动条scrollbar使用
pc端项目中,有时候会在页面内部出现滚动条的情况,windows浏览器默认的滚动条是很丑的,尤其是当滚动天出现在页面内部的时候,这时候,为了页面美观,可以考虑优化滚动条样式。 vue Element UI官方文档上并没有放出滚动条相关的示例说明,但是实际上是有这么一个组件的,读者查看element源码,就可以查到这个组件scrollbar,至于为什么不放开这个组件就不得而知了。 效果图如ele...
element-ui隐藏滚动条组件scrollbar 的使用
使用插件自带的滚动条样式 1 <el-scrollbar></el-scrollbar> 将会出现滚动的内容放到上述标签内就可以了。  这里要简单的设置一下,将标签的height设为100%,查看效果的时候,会出现一个横向的滚动条,如果你不想要横向的滚动条,使用下面css属性设置就可以只显示竖向滚动条。 .el-scrollbar{height:100%;} ps:如果...
vue element-ui table 滚动条位置缓存
需求: 浏览器不关闭的情况下,每次进入指定页面,element-ui table的滚动条保留在上次离开页面时的位置; 开发步骤: 1、经过代码测试,在vue里面给el-table 添加ref来获取元素dom,然后给refs设置scrollTo(left,top)无效; 2、添加自定义指令可以获取和设置元素属性和方法,给class为el-table__body-wrapper的元素绑定滚动事...
解决ElementUI的Table组件固定列,在屏幕刚好够表格显示时,会出现固定列显示不全的问题
在使用ElementUI的Table组件中的固定列时,发现当表格刚好显示全,处于临界值状态时,固定列的高度(height)会于表格高度不一致,导致固定列显示不全,出现垂直滚动条。 如上图所示,现在表格下方是未出现水平滚动条的,处于表格宽度刚好够显示所有字段的临界值,固定列出现了高度变小的情况,导致显示不全。 上图为检查元素找到的固定列的DOM元素,固定列的DOM元素是独
elementUI二级表格操作再次点击滚动条留在上次滑动位置问题
  只需在再次点击时加上this.tableData=‘’就可以解决
element的el-tree组件文字超出容器不出现横向滚动条问题
       最近项目中遇到一个多级的树形结构,使用el-tree组件后,父容器规定了宽高,设置overflow:auto,但是超出后横向滚动条并没有出现。       查询原因是el-tree组件中class名为el-tree-node的div是块级元素,需要把它变为inline-block,同时注意每一个节点占一行。所以覆盖element的样式: .el-tree>.el-tr...
element-ui table 表格 滚动条置顶 / 回到第一行
网上说的 滚动到第一行:(对我的表格往后翻页都有效 就是第一页不行) this.$refs.table.bodyWrapper.scrollTop =0; ps:这里有点傻了,只想着复制粘贴,其实这里在表格上还要加上ref = "table"属性,不然不生效 滚动到最后一行:(没试过) this.$refs.table.bodyWrapper.scrol...
el-table 合计行滚动问题
两个table间切换,当切换到有合计行的表格时,合计行不随滚动条滚动 解决办法,将原先的v-if换成:hidden,合计行滚动正常
elementUI - tree横向滚动问题
我想有用elementUI的人,有用到tree组件应该或多或少都有可能碰到tree节点过多需要横向滚动显示吧,但是组件文档上没有~而且百度上也少得可伶。 昨天也碰到这问题,后面在技术群里有人回答,我觉得这种问题应该记录下。 亲试这个确实能支持横向滚动,但是在我自己项目中却不生效,我也不知道啥情况。后面根据这样的css把设置在 .el-tree-node的样式往上层提升到 ....
DataTables垂直滚动条IE下的问题
     第一次使用tab加载页面时,由于页面内容是由dataTables负责渲染,tab页的宽度会成为0。这时datables读取它的容器的宽度时获取的值就是0,计算添加了滚动条(宽度为0或者设定值)的table宽度时就会产生负数。IE下赋值异常。         原代码: //这时width要赋值为负数 n.style.width = _fnStringToCss($(n).oute...
设定html table 过宽下方出现滚动条
-
vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
相信有很多小伙伴遇到过这个问题,首先还是来看图片,筛选框我做了处理,所以和官网的有点小差别 官方网站和个人网站对比图如下:     代码如下:(F12找到该元素的class,设置高度) .el-table-filter { max-height: 300px; overflow: auto; }
Element-UI在safari浏览器下table列表无法对齐的问题
由于Element-UI的table列表会在两个column中间添加一条能够拖动的竖线,(可能表现的不明显以至于很多人并没有发现,但是竖线是确实存在的。)在safari浏览器下这个竖线的样式无法正确渲染,所以导致了table列表的表头与内容存在几个px的偏差。我寻找了很久,也尝试与Element-UI官方团队进行沟通,希望官方能够修复这个bug。但是并没有生效,bug依旧存在。下面给出我的解决方案:
element-ui 的table配合 vue-infinite-loading、sortablejs 实现表格的拖拽与下拉加载
产品要求,需要对el-table实现下拉加载 并且可以实现排序 话不多说,直接贴一下我的代码吧 <style lang="scss" rel="stylesheet/scss" slot-scoped> .sortable-ghost{ opacity: .8; color: #fff!important; background: #4...
ElementUI中表格el-table滚动条样式的优化
ElementUI官方文档提供的table表格的滚动条样式不美观,简单封装之后的效果图 这里使用的是elementui中最基表格 修改样式
element-ui的table列超出部分省略加悬浮提示
<el-table-column :show-overflow-tooltip="true"> </el-table-column>
element-ui中table表头错位问题
body .el-table th.gutter{ display: table-cell!important; } body .el-table colgroup.gutter{ display: table-cell!important; } 把这样式添加到index.html中、或者app.vue中(必须是入口文件,才能全局起作用!)...
如何使得ec:table出现滚动条
方法一: 用一个div将table 套住,把层的宽和高都设为定长, [code="java"] [/code] overflow-y不要设置为visible。 这种方法不仅适用于ectable,普通table也适用。 [code="java"] [/code] 方法二: [code="java"] ...
element ui 表格动态列显示空白bug 修复
在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是一旦表格列减少时就会出问题,对element底层代码进行调试发现,在node_modules/element-ui/lib/elementui.common.js 中的一个函数 removeCo
element-ui的table表格的toggleRowExpansion方法展开指定行
首先: 文档中的toggleRowExpansion 方法,我用了没有成功。 试了另一个方法,配合原文档的展开表格,主要注意两点: 1.设置表格属性:   2.处理数据: Brief summary : row-key  和 expand-row-keys 要同时使用,才会生效!...
使用Element-ui的Table时表格不能显示问题
博主在项目中使用饿了么的dialog组件内嵌table组件时遇到问题,发现当为table重复赋相同值时会出现表格不显得错误,遇到同样问题的朋友可以避免。可以点击打开链接跟我一起操作。1.点击打开嵌套表格的dialog,发现对话框中表格是好多数据;2.点击get按钮,再点击打开嵌套表格的dialog,发现对话框里只有一条数据;3.再点击get按钮,再点击打开嵌套表格的dialog,对话框中表格不再显...
去掉ie横向滚动条
在以前的HTML标准下,要隐藏横向滚动条,只需要在CSS里加上 Body {    overflow-x:hidden; } 但是在现在的标准下"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"下面,上面的
使用elementUI滚动条之横向滚动
使用elementUI滚动条之横向滚动 用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的。 <el-scrollbar></el-scrollbar> 将会出现滚动的内容放到上述标签内就可以了。这里要简单的设置一下,将标签的height设为100%,读者查...
div或table内容超出宽度时隐藏并显示省略标记
有了这个方法,不再因为截取字符串时编码问题而烦恼了,O(∩_∩)O~ [code="html"] table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */ word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超...
element-ui 表格数据html 格式解析
<el-table-column label="命中字段" width="180" align="center">       <template slot-scope="scope">              <div v-html="scope.row.Company"></div>  
element UI table 实现合并单元格
  <el-table :data="auditListArray" :span-method="objectSpanMethod"> ... </el-table> setTable() { let spanOneArr = [], spanTwoArr = [], concatOne = 0, ...
vue elementui table默认显示子表格
templatelang="html">     el-table:data="tableData5"         :row-key="getRowKeys"         :expand-row-keys="expands"         style="width: 100%">         el-table-columntype="expand">           
element-UI 根据table中数据改变颜色 或显示对应内容
element-UI 根据table中数据改变颜色 或显示对应内容1、根据table中数据的值改变显示颜色,效果:代码:<el-table-column prop="countdown" label="剩余天数(天)" width="95"> <template scope="scope"> <span v-if="sc
Vue中监听窗口大小,修改el-table表格滚动条,控制表格高度
1、绑定表格高度,在el-table标签里面设置 :max-height="tableHeight" 2、设置表格高度,在data里面设置 tableHeight: 0 //表格高度 3、设置监听窗口变化方法,在methods里面设置 handleTableHeight: function() { var _this = this; ...
element-ui 表格数据不显示,network返回数据了,但是前端table就是没有加载到。
干货: network返回数据了,但是前端table就是没有加载到。此文章讲述的不是技术原因,而是业务或者是思路问题:两张表的切换时,数据加载和判断条件刚好交叉了即 :加载了table1 的数据,却开启了table2的显示 加载了table2的数据,却开启了table1的显示,导致的展示就是有问题,而且技术上感觉没有问题以此记录自己的傻X行为项目需要 左边有个tree,根据点击的节点是不是子节点,...
element-ui表格组件table踩坑总结
table组件中,基本情况简述: element框架的table组件,内容涵盖以下总结知识点,内容比较基础,知识有点交叉。对比学习更易于理解、应用和掌握。 常用知识点: table边框设置(行边框、全边框) tr鼠标悬停样式(斑马条纹、highlight)、点击展开tr td文字溢出处理与提示、td鼠标悬停提示 tr含有radio、checkbox的table表格(单选 、多选...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 怎么学习互联网大数据 村干部学习大数据心得