ElementUI表格隐藏表头：show-header属性

最新推荐文章于 2024-06-10 12:59:27 发布
最新推荐文章于 2024-06-10 12:59:27 发布
阅读量2.2w 收藏 11
点赞数 9
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lena7/article/details/108222449
版权

问题

引用elementUI的表格，但是不使用表头，删去了label标签。但是在获取数据时前面总是会空一行。

F5查看页面代码

虽然没有写表头，但是elementUI还是会自动注册表头（可以通过F5查看页面代码，可以看到注册了表头el-table_header）。
在这里插入图片描述

原因

查看文档，发现了属性el-table的属性show-header，默认值是true，也就是默认有表头，即使我们没有定义，也会默认添加表头。
在这里插入图片描述

解决

只需要将show-header的值设置为false即可（在这里前面的":"符号可以省略，如果使用该符号后期将value值改为变量，可以根据变量动态确定是否显示表头。）
在这里插入图片描述

lena7
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Element Ui 控制表格表头展示
qq_36457575的博客
07-31 7741
<el-table-column v-if="show" label="模型备注" header-align="center"> <template scope="scope"> <el-input v-model="scope.row.modelRemark" placeholder="...
fixed-table-header:固定表头指令
04-14
角固定表​​头 该模块将允许您在标题保持可见的情况下垂直滚动表。 执照 该软件是免费提供的，不受限制 演示版 安装 使用凉亭 该软件包可通过Bower软件包管理器安装。 bower install angular-fixed-table-header --save 在您的index.html文件中，包括源文件。 < script type =" text/javascript " src =" bower_components/angular-fixed-table-header/src/fixed-table-header.min.js " > </ script > 在应用程序中包含fixed.table.header模块作为依赖项。 angular . module ( 'myApp' , [ 'fixed.table.header' ] ) ; 使用npm和Browseri
ElementUI-Table-column_render-header:ElementUI中Table-column的render-header运用和Table的整列拖动
05-09
ElementUI-Table-column_render-header ElementUI的Table表格，官方网站上提供了很多样式，但是在日常开发中还会碰到各种情况，显然官方提供的是不能满足需求的。那么，我们就根据自己的需求对table进行改造。 先丢出关于Table的官方文档的传送门，请戳这里→ 官方对Table相关的Attributes介绍的不是很详细，对于不太熟悉人，很难搞明白，实际操作起来很难受。 下面就关于Table-column中render-header的运用，稍作说明,具体请移步此项目文件中查看。 参数 说明 类型 可选值 默认值 render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) — — 一、自定义表头样式 renderHeaderOne (h, { column, $in
el-table 实现表头置顶【干货满满】附源码
最新发布
Anonymous996的博客
06-10 731
从源码角度出发，ElTable表头固定显示。
VUE elementUI el-table 隐藏表头
sunshineTing2的博客
02-09 3753
VUE elementUI el-table 隐藏表头
010：vue中el-table 隐藏表头的两种方法
大剑师兰特的GIS世界
06-11 6895
今天再改造别人的Element UI表格代码的时候，发现表头不见了。查查了原因，发现有两种方法可以隐藏表头。方法一：通过修改element UI的css样式。方法二：属性方法 通过修改show-header的属性值
antd Table的子表格的showHeader为false，且自定义expandedRowRender时，子表格数据不更新
flheihei的博客
02-21 926
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command + B 斜体：Ctrl/Command + I 标题：Ctrl/Command + S
element-ui中table表格中，表头文本隐藏
我还起舞了的博客
10-25 414
利用el-table-column中的属性：render-header，可具体查看element-ui文档；在项目中推荐进行全局封装函数！
element-ui el-table隐藏表头
weixin_46251808的博客
11-24 3982
el-table添加属性 :show-header="status"
elementUI表格去掉表头
林太白
06-30 6339
❤️ 添加
Element UI 隐藏table表格的表头
特战程序员
04-19 561
<el-table size="mini" :data="tableData" :show-header="false" stripe style="width: 100%" class="table" height="300" cell-class-name="row" highlight-current-row > &l.
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
12-04
render-header render-header在官方文档中的介绍是这样的： 参数 说明 类型 可选值 默认值 render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) — — 修改列标题...
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
12-29
ElementUI2.0的表格的扩展： elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？ <el empty-text=正在加载中... data=contentList xss=removed sort-change=sort...
element-ui——element-ui 中 表格是否显示表头
qq_43201350的博客
08-30 847
show-header属性为布尔值，true为显示/false为隐藏 示例： <el-table :show-header="true"></el-table>
element-ui 实现隐藏table表格的表头
m0_47735883的博客
06-09 1181
<el-table :data="projectList" border :show-header="false" align="center" highlight-current-row style="width: 100%" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" > <el-table-column label="项目名称" pro.
elementui 表格table隐藏表头
热门推荐
LLL_liuhui的博客
09-17 2万+
show-header属性 <el-table border ref="multipleTable" :show-header="showHeader"> <el-table-column fixed v-if="checkbo...
element隐藏列表表头全选
学习记录
02-14 394
element列表表头全选隐藏
关于ElementUI表格-表头排序显隐实现
Yupiece的博客
06-26 787
【代码】关于ElementUI表格-表头排序显隐实现。
element 表格使用了header-cell-style后表头超出隐藏
agua001的博客
11-29 1713
(表头有一列不显示了)（有数据，但是不显示）
设置elementui 表格表头header-row-class-name
05-14
你可以在 element-ui 表格组件中使用 `header-row-class-name` 属性来设置表头的自定义样式类名。 具体做法如下： 1. 在表格组件中添加 `header-row-class-name` 属性，并将其值设置为一个自定义的样式类名，例如 `my-header-row`： ```html <template> <el-table :data="tableData" header-row-class-name="my-header-row"> <!-- 表格列定义 --> </el-table> </template> ``` 2. 在样式表中定义 `my-header-row` 样式类，设置表头的自定义样式： ```css .my-header-row { background-color: #f5f5f5; font-weight: bold; } ``` 通过以上操作，就可以为 element-ui 表格组件的表头设置自定义样式类名，从而实现表头的自定义样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值