问题描述
我正在使用一个名为 Element UI 的 UI 框架,并且我正在将他们的表格用于我的项目。我需要表格的主体在顶部有一些填充,以便为在行开始之前放在顶部的过滤器输入腾出空间。尽管并非我项目中的所有表都具有此过滤器输入,因此并非所有表都需要此填充,但我的问题是我的目标是来自 Element UI 的类(不是我自己创建的),并且是唯一一个文件代码确认此选择器在 App.vue 中。尝试将此样式放在单个文件中是行不通的。我试图只为某个文件删除此填充,并为所有其他文件保留填充。
App.vue 文件
.el-table__body {
padding-top: 48px;
}
解决方法
我使用 element UI 已经 2 年了,我也遇到了同样的问题。 Element-UI 样式中的一点是,它们可以在自己的组件中设置样式。
假设对于您的情况,您可以通过向其添加“自定义类”来仅设置“el-table”的样式,并且仍然可以使用作用域,但是当您使用 时无法设置“el-table__body”内部的样式范围。
如果你真的想设置样式,从“样式”中删除“范围”,像这样:
<style>
.el-table__body{
padding-top: 200px;
}
</style>
注意:当你来到这个组件然后打开任何其他具有相同“el-table__body”的组件时,上述技巧会将样式应用到所有其他表格 "类。
为避免影响其他组件的表格样式,添加自定义类名,然后定位el-table__body。
例如:
<el-table
:data="tableData"
class="stack-table"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
CSS 样式目标如下:
.stack-table .el-table__body{
padding-top: 200px;
}