ElementUi el-table 美化暂无数据状态

最新推荐文章于 2025-07-01 21:05:26 发布

柒柒兮

最新推荐文章于 2025-07-01 21:05:26 发布

阅读量3.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Element 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_28948031/article/details/119423879

本文介绍了如何美化ElementUi的el-table组件在无数据时的状态。在数据过长出现横向滚动条的情况下，原始的无数据提示会被滚动条遮挡，影响页面美观。通过一些修改，实现了无数据提示始终居中显示，提升用户体验。

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

前言：当表格数据过长的时候，会出现横向滚动条，这个时候暂无数据就需要拉动滚动条到中间才能看到，导致页面及其不美观，所有，请看下方

正常的空值状态如下

在这里插入图片描述

经过修改后

在这里插入图片描述

解决方法如下

<template>
	<el-table  border :class="{ 'table': '', 'noScrol': tableText }" >
				//通过slot自定义空状态
				<template v-slot:empty >
					<p :class="{'el-table-empty-p':tableText}">{
  
  {tableText}}</p>
				</template>
	</el-table>			
</template>
<script>
	import {ref} from "vue";
	export default {
		setup() {
			const tableText = ref("暂无数据");//这边暂无数据的逻辑自己结合需求设置
			return {
				tableText
			}
		}
	}
</script>
<style scoped>
//强制设置样式隐藏滚动条（这里我是全局设置了，可根据自己需求来）
	.el-table-empty-p {
	display: block;
	widt