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

出现表格数据过多至出现滚动条的情况，这个时候暂无数据时会出现显示的”暂无数据“随滚动滚动的情况，如下图，效果很不好。什么办法可可以让暂无数据内容直接在表格中居中呢？这里用到/deep/ 深度选择器，修改element-ui的对应css注:vue-cli-3中scss中可能无法识别/deep/用::v-deep代替！::v-deep .el-table__empty-block {width: 10

尼给路达哟

5525人浏览 · 2021-11-10 10:47:37

尼给路达哟 · 2021-11-10 10:47:37 发布

出现表格数据过多至出现滚动条的情况，这个时候暂无数据时会出现显示的”暂无数据“随滚动滚动的情况，如下图，效果很不好。

在这里插入图片描述
什么办法可可以让暂无数据内容直接在表格中居中呢？这里用到/deep/ 深度选择器，修改element-ui的对应css

注:vue-cli-3中scss中可能无法识别/deep/用::v-deep代替！

::v-deep .el-table__empty-block {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
}

效果图如下
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^