el-table中无数据时区别背景色，占满一屏

原创 已于 2023-05-26 11:55:28 修改 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #css3

于 2023-05-26 11:38:25 首次发布
当使用el-table并在数据为空时，通过设置table的height属性并结合条件判断实现满屏显示。通过initHeight方法计算高度，减去固定高度，确保在无数据时仍能填充父级容器。在mounted生命周期钩子中应用这个高度，以达到自适应的效果。

        引入el-table后，如果绑定的表格没有数据，在显示暂无数据的同时，又想让占满一屏，不然会显示父级盒的背景色。

        首先在table上加入:height属性，如果不止一个页面的话需要做判断（三目即可）

 

 接着在return中定义tableheight

 methods中定义initHeight方法

 解释：满屏减去除表格之外固定的高度

接着mounted中，让其自适应高度

·xuyao
关注
vue2 - 详细实现elementUI el-table 将表格布局自适应撑满页面高度（布局优化）
前端充电宝
03-01 5085
vue2详细实现elementUI el-table 将表格布局自适应撑满页面高度
Vue3 - Element Plus 表格组件 table 隐藏鼠标移入时 hover 高亮背景色，el-table 组件去除鼠标悬停在表格行的 hover 高亮效果（完美解决表格合并后导致行错位）
🏆 前端领域优质创作者
02-19 7621
vue3，elementplus，el-table，table表格，取消表格行row移入高亮效果，elementplus表格组件去掉鼠标移入行时的hover效果，取消el-table的hover状态，取消高亮显示，隐藏表格鼠标hover效果，去除鼠标触摸变色效果，如何取消elementplus表格的行悬停效果，怎么将表格移入每行时的灰色高亮去掉，table的行hover如何去除，element的el-table合并，处理合并产生的hover样式问题，表格合并后鼠标移入hover出现异常问题，表格行被鼠标
table设置空数据提示
guapilixianghe的博客
06-28 1322
2，普通table
el-table表格中数据为空时，表格项显示 ——
weixin_56733569的博客
03-20 5105
当el-table表格项为空的时候，显示"——"符号
element-ui的el-table表格中给暂无数据加背景图
weixin_41070391的博客
06-13 6791
css样式： .el-table__empty-text { display: block; width: 500px; height: 385px; padding-top: 300px; background:url(’…/assets/img/Noneimg.jpg’) no-repeat; color: #909399; box-sizing: border-box; } 插入背景图效果：...
vue中，el-table无数据（空数据）时，进行暂无数据的文本内容设置之具名插槽#empty（v-slot=empty）和empty-text
weixin_44867717的博客
05-15 4935
在表格空数据时显示的文本内容，也可以通过。设置，来展示【暂无数据】
el-table 列背景色渐变
ZionHH的博客
09-15 1246
ElementUI el-table 列背景色渐变
vue3+element-plus：实现Table表格列表判断某个值动态设置单元格背景颜色，根据不同的值表格单元格显示不同的背景色，el-table表格行多种颜色轮询展示功能效果（详细示例代码可运行）
高级前端工程师
06-25 2694
element-plus table表格根据单元格的值动态设置背景色，table表格相同类型一个颜色，el-table表格中相同的数据设置一个颜色，根据不同的值表格单元格显示不同的背景色，设置table单元格背景色，数据表格根据字段信息设置行背景色，Table表格根据不同状态显示不同的颜色，通过判断某个字段让符合条件的单元格指定颜色值，根据不同得值，动态显示不同的颜色，vue element table表格列表 根据一个属性进行分类 每个分类对应指定的单元格颜色，动态设置表格颜色，动态设置单元格颜色，tab
vue2+elementUI：实现Table表格列表判断某个值动态设置单元格背景颜色，根据不同的值表格单元格显示不同的背景色，el-table表格行多种颜色轮询展示功能效果（详细示例代码可复制运行）
高级前端工程师
06-25 2029
element table表格根据单元格的值动态设置背景色，table表格相同类型一个颜色，el-table表格中相同的数据设置一个颜色，根据不同的值表格单元格显示不同的背景色，设置table单元格背景色，数据表格根据字段信息设置行背景色，Table表格根据不同状态显示不同的颜色，通过判断某个字段让符合条件的单元格指定颜色值，根据不同得值，动态显示不同的颜色，vue element table表格列表 根据一个属性进行分类 每个分类对应指定的单元格颜色，动态设置表格颜色，动态设置单元格颜色，table表格对
el-table占满整个页面
weixin_41171651的博客
12-01 1749
【代码】el-table占满整个页面。
【UI】 element ui 表格没有数据时用--填充
fruge365的博客
10-13 2437
element ui 表格没有数据时用--填充
el-table高度自动撑满全屏
qq_39251620的博客
12-23 879
2,directive-》index.js引入。1，新建table.js。
解决 element-ui el-table表格组件先显示暂无数据 之后再加载数据的问题
weixin_42220130的博客
10-30 2998
解决办法：动态定义tablelist为空时候展示的内容，没有请求到数据之前显示为空，请求到数据但是数据本身就是空的再显示"暂无数据"项目中的表头和内容都是动态请求生成的，延时更久就会出现先闪一下（比闪一下更久）暂无数据，再显示正常界面的问题，用户体验会比较差。本文链接：https://blog.youkuaiyun.com/a1059526327/article/details/110374558。empty-text为table组件空数据时显示的文本内容，也可以通过slot="empty"设置。
el-table搜索后有总数列表却没数据
weixin_41950674的博客
01-21 633
可能是先点击了翻页，比如当前页在第二页，搜索的时候，当前页传的是2.其实搜索结果不够1页，只有几条数据，因为第二页肯定是没有数据的。所以列表不显示数据，总数却有数字。 解决办法就是搜索时把当前页重置为1 ...
Vue3: el-table表格数据不显示
无面人的博客
11-15 7257
Vue3: el-table表格数据不显示
el-table表格数据没有刷新
许粤军的博客
09-13 2927
一般遇到这种情况可以试试绑定key： data()里面定义一个randomKey 每次有更改表格数据的地方都记得重新对randomKey赋值，也就是加入这行代码： this.randomKey = Math.random()
el-table表格无数据时，更改其自带的提示‘暂无数据’
yh8899abc的博客
07-21 7334
效果图 实现： empty-text = "--" <el-table :data="scope.row.children" empty-text = "--"> <el-table-column prop="level" header-align="center" align="center" class="sonTable"> <template slot-scope="scope"> </template>
el-table滚动条和vxe-table表格充满屏幕问题记录
weixin_44232293的博客
07-15 3545
1、el-table添加滚动条，加上标签： 需要有滚动条的表格 即可，但是以下问题需要注意： （1）其被标签包裹； （2）其父布局，及包含他的所有父布局均需要有高度 2、vxe-table表格下面有页码和页码跳转，其直接显示将会紧挨着数据的最后一条，当数据过少，其界面不美观，随着数据增多，页面溢出，则设置max-height则会出现滚动条。 想要显示不紧挨着数据最后一条，则将max-height设置为height='100%'即可。 前端小白记录日志。 ...
el-table第一列除表头背景色红色
最新发布
09-05
可以通过 `cell-style` 属性结合 CSS 选择器来实现将 `el-table` 第一列除表头部分的背景色设置为红色。以下是示例代码： ```vue <template> <div> <el-table :data="tableData" :cell-style="tableCellStyle"> <el-table-column prop="column1" label="Column 1"></el-table-column> <el-table-column prop="column2" label="Column 2"></el-table-column> </el-table> </div> </template> <script> import { ref } from &#39;vue&#39;; export default { setup() { const tableData = ref([ { column1: &#39;Data 1&#39;, column2: &#39;Data 2&#39; }, { column1: &#39;Data 3&#39;, column2: &#39;Data 4&#39; } ]); const tableCellStyle = ({ row, column, rowIndex, columnIndex }) => { if (columnIndex === 0 && rowIndex > -1) { return { backgroundColor: &#39;red&#39; }; } return {}; }; return { tableData, tableCellStyle }; } }; </script> <style scoped> /* 如果需要使用 CSS 选择器的方式 */ ::v-deep .el-table__body td:first-child { background-color: red; } </style> ``` 在上述代码中，使用了两种方式来设置第一列除表头部分的背景色为红色。一种是通过 `cell-style` 方法，在该方法中判断当前单元格是否为第一列且不是表头，若是则返回红色背景色样式；另一种是使用 CSS 选择器 `::v-deep .el-table__body td:first-child` 来选中表格主体部分的第一列单元格并设置背景色。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值