element-ui中table组件 对行设置高度使其不自动换行避免撑开高度

最新推荐文章于 2024-05-08 15:13:28 发布
最新推荐文章于 2024-05-08 15:13:28 发布
阅读量6.1k 收藏 4
点赞数 2
分类专栏： css 文章标签： element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39917399/article/details/97136699
版权 
.cell{max-height: 23px !important;overflow: hidden; !important;}

一句搞定 高度 23px一行 看情况而定 overflow auto 可出现滚动条

小道士在路上
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI中 el-table 表格单元格非固定层级嵌套导致的高度自适应及单元格匹配对齐
weixin_39969385的博客
10-11 1885
遇到一个问题，ElementUI 下 el-table 表格单元格的高度自适应问题，及子单元格的层级对齐问题 要求实现为这个样子 图片上可以看到有的单元格内嵌套的是多条数据，且不固定条数，例如评价维度列，为实现图二的效果，我这边对单元格及其子元素进行了定位处理，其子元素（渲染出来的div.cell）设置最小高度为100%，但是这种情况会导致高度塌陷，于是我为评价维度列的单元格子元素设置了取消定位，其他单元格子元素正常定位，这里这么操作是为了把单元格撑开（el-table渲染的时候行的高度默认跟随
egrid:对 element-ui table 组件的封装
05-10
基于 Element-UI Table 组件封装的高阶表格组件，可无缝支持 element 的 table 组件。 element 升级到了 2.0 了， 不用担心可以无缝升级的~ 文档 开发 npm run dev npm run build npm run doc 使用 安装 Element： ...
解读element-ui中table组件部分源码与需求分析
04-01
解读element-ui中table组件部分源码与需求分析
详解使用element-ui table组件的筛选功能的一个小坑
10-17
在element ui 框架中，对于table框架，有一个筛选功能，这篇文章主要介绍了详解使用element-ui table组件的筛选功能的一个小坑，非常具有实用价值，需要的朋友可以参考下
elementUI表格table文字不换行
最新发布
hexu_blog的博客
05-08 311
在对应不需要换行的列加上属性：:="true"即可。
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
el-tree-table 简介 el-tree-table组件基于vue和element-ui，在 的实现基础上增加一些新特性。 并在此声明treetable的业务实现再来上述开源项目，如有冒犯，请及时联系。 共同依据element-ui的写成。 扩展主要包括：显示边框、固定高度、显示复选框、复选框选中是否遵循父子关联、复选框禁用条件。 - 这里有一个兄弟组件-树形穿梭框： - 快速上手 npm i @weilan/el-tree-table --save 或 npm i @weilan/el-tree-table -S import TreeTable from '@weilan/el-tree-table' Vue.use(TreeTable) 示例 <treeTable :data="tree_table" :columns="columns" checkBox expandAl
解决ElementUI中的table表格内容过多，导致行内撑开的问题。
qq_43474235的博客
08-01 6692
解决ElementUI中的table表格内容过多，导致行内撑开的问题。
解决element的Table表格组件的高度自适应问题
Wannaer的博客
04-15 345
解决element的Table表格组件的高度自适应问题，使用 cacl 失效
解决elementui表格组件中列被撑开或自动换行的问题
lalalalalamo的博客
03-18 5689
最近在做的一个vue项目，从后台获取到的数据，由于部分字段的数据太长会将table自动撑开，很不美观。。 网上说的好多都是利用 !important给强制设置高度，但是我试过好像也不行，，，， 遇到这种的同学可以试试添加这个属性试试:show-overflow-tooltip="true" 然后看效果如图，，就舒服多了 ...
表格单元设置固定高度，不让内容撑开高度，文字超出部分显示...
coderxsj
09-30 1376
td { height: 30px; line-height: 30px; padding: 0; text-align: center; white-space:nowrap; overflow:hidden; word-break:keep-all; text-overflow:ellipsis }
el-card里面添加el-table表格无法撑开
段王爷的博客
01-18 2183
在进行页面布局分块后，在el-card卡片里添加el-table后，表格数据无法撑开，只能显示一行且自动带上了滚动条，展示效果十分不理想。通过F12检查发现，.el-card__body该属性的限制导致无法撑开。
element el-tabs循环渲染表格踩坑细节 el-table无数据高度撑不开 ajax请求问题 table ref取不到
weixin_53898445的博客
05-17 4861
简略代码 <el-tabs v-model="type" :tab-position="tabPosition" type="border-card" @tab-click="handleClick"> //handleClick tab切换时重新请求数据 <el-tab-pane v-for="(item, index) in table" :key="index" :label="item.label" :name="item.value"> <div...
element-ui组件table实现自定义筛选功能的示例代码
10-17
主要介绍了element-ui组件table实现自定义筛选功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
实习总结第七谈-----------vue中element-ui的表格行高怎么控制
zhangkegu的博客
01-03 1912
依旧在我负责的当前项目中举例子： 我的表格要求是一页只显示10条数据，且纵向不能产生滚动条，这样就意味着不能设置表格的整体高度来控制，那样会会产生滚动条，要么在表格纵向产生滚动条，要么在屏幕纵向产生滚动条，这时候我就想到了控制表格每一行的高度降低，就不会 十条数据就产生滚动条了，方法如下： 一：定义一个table表格的style 的回调方法，如图 该方法是element插件中的文档有的固定方...
el-table高度适配问题
程序猿GTC
05-22 1902
当多个tabs时，如果table高度，依赖性其父组件的高度，只有第一个tabs高度为实际值，其他tabs的高度为0，但mounted时，已经赋值给table,会导致其他tabs的table显示不出来。2 在tabs的子组件设置一个属性，外层的高度获取到后，通过属性传给子组件，子组件显示时，直接计算一下（减去其他部分的高度，一般就是底部查询或操作高度，底部分页高度）el-table不能自适应高度，必须给定具体的值，才能显示正常，同时在数据条数超过其高度时，table出现滚动条，而不是整个页面出现滚动条。
element ui tab表格无限拉伸问题解决方案
weixin_45859470的博客
01-05 556
element ui tab表格无限拉伸问题解决方案。
el-table设置表格高度无效
qq_45325025的博客
08-19 3190
我的项目表格的列，是请求后台后，拿到数据才进行渲染的，也就是动态的，所以在项目中遇到，即使我设置了表格高度，渲染出来的表格高度依然没有高度，但是只要我屏幕缩放，高度就会生效。el-table__body-wrapper自适应失败，网上说是element的bug，改变思路，在element官方文档中发现了如下方法。明明下方有空白，但是table只能显示一部分，但是屏幕一缩放，高度就恢复了，打开控制台发现。每当调用获取table数据的方法后调用一下。当获取数据后，对table进行重新渲染。
element -plus /ui 设置 table组件 行高
零之使魔@初ꦿঞ
02-14 3356
element table 列在IE下没有撑满100%
qq_39917399的博客
09-29 1031
.el-table__header{ width: 100% !important; } .el-table__body{ width: 100% !important; }
element-ui中table组件固定高度
05-24
要在element-ui的table组件中固定高度，可以使用`height`属性来设置表格的高度。例如： ```html <el-table :data="tableData" height="300"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> ``` 在上面的示例中，将表格的高度设置为了300px。这将使表格的内容在超出高度时出现滚动条。 如果你想要固定表头和表尾，并且只滚动表格内容，可以添加`max-height`属性，并设置`height`为`100%`。例如： ```html <el-table :data="tableData" height="100%" max-height="300"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> ``` 在上面的示例中，表格的最大高度为300px，并且表头和表尾将固定在表格的顶部和底部。如果表格内容超出了高度，将会出现滚动条。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值