ElementUI的Table组件在无数据情况下让“暂无数据”文本居中显示

1. 问题起源

当显示多列字段时，底部会出现滚动条。“暂无数据”文本根据列平铺的总宽度进行居中，导致无数据时“暂无数据”文本向右偏移。

2. 解决方法

设置“暂无数据”文本元素所在元素右侧的内边距。

/deep/ .el-table__empty-block {width: 100%;min-width: 100%;max-width: 100%;padding-right: 100%;
}

3. 最终效果

如果你觉得此篇博客对你有帮助，请点个赞再走吧！
转载请注明出处，并留言！

ElementUI的Table组件在无数据情况下让“暂无数据”文本居中显示相关推荐

在 Element-UI 的 Table 组件上添加列拖拽效果
在 Element-UI 的 Table 组件上添加列拖拽效果一.数据驱动传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup 事件来修改删减 dom 节点但 V ...
vue 带全选和多选的表格怎么写_vue+element-ui里面table组件多选框实现批量操作
vue+element-ui里面table组件多选框实现批量操作有时候人不是被困难难倒的,是被自己蠢哭的...官方文档用到某个地方的时候,才感觉对这个方面的理解才会加深一点,还是要记录一下这个地方! ...
ui做成html格式,使用element-ui的table组件时，渲染为html格式
背景今天在作vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操做后,发现 html格式并无被识别 html 缘由在 element-ui 中,tabl ...
原生html使用element组件,使用element-ui的table组件时，渲染为html格式
背景今天在做vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操作后,发现 html格式并没有被识别原因在 element-ui 中,table组件默 ...
(Table)操作：Element-ui 中 Table 表格的设置表头/去除下标线/设置行间距等属性的使用及 slot-scope=“scope“ 的使用案例
Ⅰ.Element-ui 提供的Table组件与想要目标情况的对比: 1.Element-ui 提供Table组件情况: 其一.Element-ui 自提供的Table代码情况为(示例的代码): // ...
Vue使用ElementUI的Table组件表头与内容不对齐问题
问题描述:用ElementUI开发后台,使用Table组件时,表头与内容不对齐解决方法: 在App.vue组件中添加如下代码: <style> .el-table th.gutter { ...
如何使用ElementUI的table组件来实现单元格的行合并
前言最近在编写一个值班的排班表,然后中间涉及到了表格应用.并且还要做出类似这种效果的行合并效果: 然后就开始找组件了.Html的table是有rowsSpan和colsSpan的属性来实现行合并和列 ...
ElementUI的Table组件不支持SSR
如果需要支持,可以研究下分支: https://github.com/ElemeFE/element/pull/13018 参考 element ui table组件 SSR 无法渲染数据-数据为空
element-UI ，Table组件实现拖拽效果
拖拽效果,先放效果图,步骤放在后面~~ 一.引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedragg ...

ElementUI的Table组件在无数据情况下让“暂无数据”文本居中显示

1. 问题起源

2. 解决方法

3. 最终效果

ElementUI的Table组件在无数据情况下让“暂无数据”文本居中显示相关推荐

最新文章

热门文章