目录
问题:
如图所示,下面是el-table使用了border属性后没有效果:
使用的代码:
看了下官方文档,并且检查了下自己写的并没有错误
<el-table
height="100%"
width="100%"
border
resizable
v-loading="loading"
:data="tableData"
@selection-change="tableSelect" >
官方文档的说明:
height | Table 的高度,默认为自动高度。如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则这个高度会设置为 Table 的 style.height 的值,Table 的高度会受控于外部样式。 | string/number | — | — |
max-height | Table 的最大高度。合法的值为数字或者单位为 px 的高度。 | string/number | — | — |
stripe | 是否为斑马纹 table | boolean | — | false |
border | 是否带有纵向边框 | boolean | — | false |
size | Table 的尺寸 | string | medium / small / mini | — |
fit | 列的宽度是否自撑开 | boolean | — | true |
show-header | 是否显示表头 | boolean | — | true |
可能的问题所在:
CSS 样式覆盖:你的项目中可能有其他的 CSS 样式覆盖了
el-table
的边框样式。检查你的 CSS 文件,确保没有其他样式影响到了el-table
或其子元素的边框。Element UI 版本:确保你使用的 Element UI 版本是支持
border
属性的。虽然border
属性在 Element UI 的早期版本中就已经存在,但最好还是检查一下文档或更新到最新版本。组件使用方式:确保你正确地使用了
border
属性。border
属性应该直接添加到el-table
标签上<el-table :data="tableData" border> <!-- 表格列定义 --> </el-table>
- 浏览器兼容性:虽然这种情况不太常见,但也有可能是浏览器兼容性问题导致的。尝试在不同的浏览器或浏览器版本中查看你的页面,看看问题是否仍然存在。
- 使用了作用域插槽:
el-table
使用作用域插槽 (scoped slot
) 后,border
属性没有效果的原因通常与插槽内容渲染的方式有关。在 Element UI 中,el-table
组件的边框样式是通过在表格元素(通常是table
,thead
,tbody
,tr
,td
等)上添加特定的 CSS 类来实现的。
关于使用了作用域插槽:
a.自定义内容的样式覆盖:
当你在作用域插槽中定义列内容时,你可能不小心添加了一些 CSS 样式,这些样式可能覆盖了 el-table
组件默认的边框样式。
b.表格结构的改变:
作用域插槽允许你完全自定义列的内容,这可能导致表格的 HTML 结构发生变化。如果这种变化破坏了 Element UI 用来添加边框的 HTML 结构,那么边框样式可能不会按预期显示。
解决方案:
通过css样式解决:
我这里直接写到app.vue里面,你也可以写到全局样式里,或者单个页面。
如果你在使用单文件组件(.vue
文件),确保你的样式没有被 scoped 或 module 限定。scoped 或 module 样式只会应用于当前组件,不会影响到子组件。如果 el-table
的边框样式被限定在当前组件内,它可能不会被应用到 el-table
的子元素上。
颜色这些自定义或者自己取色
//加在app.vue
.el-table{
/* 表头增加border */
thead th:not(.is-hidden) {
border-left: 1px solid #ebeef5 ;
}
/* 表单增加border */
.el-table__row {
td:not(.is-hidden) {
border-left: 1px solid #e4e7ec ;
}
}
}
如果使用单页面的,可能会没有效果,你需要加上::v-deep 深度作用,或者加上 !important,
使用!important的话需要谨慎,优先级最高了,需要确保不会影响其他的(如果你有其他修改当前的样式)
::v-deep
//或者
!important
//加在当前页面css
.el-table{
//表头
::v-deep thead th:not(.is-hidden) {
border-left: 1px solid #ebeef5;
}
//表单
::v-deep .el-table__row {
td:not(.is-hidden) {
border-left: 1px solid #e4e7ec;
}
}
}
假如你需要修改表头或者表单的某一项的border,可以在上面的样式基础上加上child选择器
下面为常用的child选择器举例:
//第n个 n为int类型
:nth-child(n)
//偶数
:nth-child(2n)
//奇数
:nth-child(2n-1)
//选择前5个元素
:nth-child(-n+5){}
//从第5个开始
:nth-child(n+5){}
//限制范围 选择第5个到第20个
:nth-child(-n+5):nth-child(n+20){}
//倒数第n个
:nth-last-child(n)
解决效果:
成功解决,希望有帮助,谢谢。