(vue)el-table表格最小/自动高度设置

最新推荐文章于 2024-10-17 09:19:32 发布

nyf_unknown

最新推荐文章于 2024-10-17 09:19:32 发布

阅读量3.7k

点赞数 10

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44754635/article/details/135530698

版权

VUE 专栏收录该内容

202 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用ElementUI的el-table组件时，设置其最小高度和自动适应内容的高度，重点在于如何应用`size`属性为mini并设置`min-height`样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(vue)el-table表格最小/自动高度设置

在这里插入图片描述

<el-table
  :data="tableData"
  size="mini"
  border
  style="min-height:100px" //重点
>
  <el-table-column align="center" label="参数名称" prop="parametersName" />
  ...
</el-table>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

nyf_unknown

关注关注

10
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

简单封装el-table表格组件支持 render 动态渲染

weixin_44180190的博客

03-31

2893

简单封装el-table组件使用配置的方式生成想要的组件效果额外实现了多级表头自适应表格高度支持使用el-table 的api 支持使用render函数

【el-table】表格要求内容固定高度，使用原生给计算高度

wujiezhiwei的博客

04-27

666

<template> <div class="content"> <div class="content-div-style"> <searchCom @searchChildFun="searchChildFun" ref="searchChildFun"></searchCom> <div class="table-div-project"> <div class...

参与评论您还未登录，请先登录后发表或查看评论

html 表格高度调整,elementui中el-table修改表头高度和行高度（设置最低高度）

weixin_39654619的博客

06-20

3142

问题描述elementui提供的el-table其实挺不错，不过有时候可能还需要对其进行样式的修改。官方也提供了相应的表格属性，方便我们去修改对应的样式，但是有的时候可能会少了点什么。比如：想要把表格的高度都尽可能设置小点，这样的话，页面就可以展示更多行更多条数据了。但是单单使用下图中的表格的属性，发现没法让表格的高度设置最小解决方案打开F12审查元素，会发现el-table默认带有内边距padd...

antd table minHeight

qq_32862143的博客

08-29

2224

这种方法也不是不可以，但是若需要动态设置最小高度的话，这样写就不是很合适。第一步：计算table scroll height。第二步：设置滚动区域的高。

el-table的自定义行高设置

qq_43894292的博客

11-09

5027

el-table的自定义行高设置

ant design vue的table表格高度设置

最新发布

qq_46551351的博客

10-17

909

vue + element ui - table 组件

Vue 自适应高度表格的实现方法

11-20

Element UI 的 el-table 组件允许通过设置 `height` 属性来指定表格的高度，从而在表格内部生成滚动条，避免影响整个页面的布局。然而，固定的高度在不同分辨率或浏览器缩放比例下可能无法适应，导致外部滚动条依然...

VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

12-30

在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的：只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。然后直接上template代码：

elementUI中 el-table 表格单元格非固定层级嵌套导致的高度自适应及单元格匹配对齐

weixin_39969385的博客

10-11

2071

遇到一个问题，ElementUI 下 el-table 表格单元格的高度自适应问题，及子单元格的层级对齐问题要求实现为这个样子图片上可以看到有的单元格内嵌套的是多条数据，且不固定条数，例如评价维度列，为实现图二的效果，我这边对单元格及其子元素进行了定位处理，其子元素（渲染出来的div.cell）设置最小高度为100%，但是这种情况会导致高度塌陷，于是我为评价维度列的单元格子元素设置了取消定位，其他单元格子元素正常定位，这里这么操作是为了把单元格撑开（el-table渲染的时候行的高度默认跟随

vue+elementui中的el-table表格高度自适应设置

路飞船长的博客

10-08

9017

vue+elementui中的el-table表格高度自适应设置。

element 表格最小的高度_B端交互界面基础组件-表格

weixin_42299645的博客

12-28

852

我们常说一个表格基本的功能是包含增删改查的，为了完整的表达这一功能，常见的就是用表格组件，表格被公认为是展现结构化数据最为清晰、高效的形式。常和按钮、搜索、筛选、分页等其他界面元素一起协同，构成表格页。它具备结构简单，分隔和归纳明确等特点，帮助对比分析，大大提升了用户对信息的接收效率和理解程度。回归到线下场景更像家里的柜子，我们使用抽屉可以用来收纳整理，极大提升用户信息收纳的效率，空间利用率，查找...

vue项目解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案；TAdaptivePage 组件新增左右分栏布局）

wocwin的博客

04-24

2万+

vue项目解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案）

vue, element-ui, el-table，根据浏览器的高宽，设置表格不同高度

gaowxx的博客

01-24

871

template中，设置el-table的:max-height="this.tableHeight"在小屏幕下，将table的max-height设为固定值；在大屏幕下，表格高度根据浏览器高度自适应。document.body.clientWidth 当前浏览器宽度。window.innerHeight 当前展示页面高度。

el table设置每一行的高度、边框加粗

懒虫的博客

04-18

8178

el table设置每一行的高度、边框加粗

修改el-table行高

dd_lcdw的博客

01-12

6280

1. 设置表格第一列背景颜色2.设置单元格高度。

Vue+element el-table 横向表格展示数据，表格错位 auto布局

09-21

在Vue.js中结合Element UI库创建横向滚动表格（el-table），你可以使用Element UI提供的`el-table-column`组件以及自适应列宽的属性`show-overflow-tooltip`和`min-width`来解决错位问题，并通过设置`width`属性为百分比配合`auto-fit`模式来实现自动布局。首先，在模板中，你可以这样配置el-table： ```html <template> <div class="table-container"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="Name" width="20%" show-overflow-tooltip min-width="80px" ></el-table-column>  <el-table-column prop="otherColumn" label="Other Column" width="20%"  :show-overflow-tooltip="true" min-width="80px" ></el-table-column>  <el-table-column type="expand" label="Expand"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: 'Item 1', otherColumn: 'Data for Item 1' }, // 更多数据... ] }; } }; </script> <style scoped> .table-container { overflow-x: auto; /* 设置水平滚动 */ } </style> ``` 这里，`width`属性设置了列的初始宽度，`min-width`保证了最小显示宽度，而`show-overflow-tooltip`可以让超出内容有提示。同时，给包含表格的容器添加`overflow-x: auto`可以使其在内容过多时显示水平滚动条。如果需要自动调整列宽，你可以将`width`属性设为百分比（如上例中的`20%`），然后启用`el-table`的`auto-fit`属性： ```html <el-table :data="tableData" :auto-fit="true" style="width: 100%"> ``` 这会使得列宽按照内容填充表格空间。