ElementPlus修改表头及表格样式外加去除表格边框
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
效果图如下
<div class="tableMain">
<el-table :data="tableData" style="width: 100%;height: 100%;" :header-cell-style="{
'background': '#24826c !important',
'color': '#ffffff',
'border': 'none !important'
}" :row-style="{ 'background': '#353535 !important', 'color': '#ffffff' }">
<el-table-column prop="date" label="设备名称" />
<el-table-column prop="name" label="设备型号" />
</el-table>
</div>
其中header-cell-style为更改头部样式的
row-style为表格主体的样式修改
我这里只需要单独设置一个样式,想要别的效果请参考elementPlus官方文档
表格中的表格边框线如何处理?
未作处理
这里我并没有直接清除掉下边框线而是让这些边框线的color变为了和背景一样的颜色,一样达到了边框线消失的情景
下面为示例代码
.tableMain {
.el-table {
--el-table-border-color: rgb(53, 53, 53) !important;
}
一行代码直接搞定,百度了一堆对于我来说都没有效果,所以自己用浏览器调了一下。这行代码添加完以后效果就和最开始展示的那个图一样了
注:最好在table的上一级盒子样式下写css,这样不会影响到其他的样式
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)