el-table使用与样式修改大全

目录

一、样式修改篇

修改头部背景

修改行背景

修改斑马线背景(奇偶行背景)

修改行内线的颜色

修改表格最底部颜色和高度

修改表头字体颜色

修改表格无数据背景，字体颜色

修改鼠标选中行的背景颜色

修改表格鼠标悬浮hover背景色

让行内文字居中（除表头外）

修改除表头外的表格内容的背景色：

修改行高：

修改整个表格的水平和垂直滚动条

二、使用篇

2.1 自动添加一列序号

2.2 定制某一列的显示样式

2.3 获取某列的值，定制template模板

2.4 el-table使用checkbox实现多选功能，使用时候默认勾选几个待选项

2.4 el-table使用checkbox，实现全选功能的切换

2.5 el-table 根据输入的搜索字段，实现搜索筛选

2.6 表格内容或者表头居中

2.7、el-table树结构，需要一个按钮全部展开树和全部折叠树结构

2.8、固定表头需要给height一个固定值，也要高度自适应

---

---

一、样式修改篇

开篇：修改element的样式的时候style标签不能加上scoped所以为了防止修改的样式影响到别的页面，建议在当前页面加一个id,修改时带上id，或者在样式前面加上  /deep/ ，控制修改的权限范围

<template>
   <div id="top">
</div>
</template>

修改头部背景

#top .el-table th{
    background: #344067;
  }

修改行背景

 #top .el-table tr{
   background: #16203C;
  }

修改斑马线背景(奇偶行背景)

#top .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #1f284c;
  }

修改行内线的颜色

#top .el-table td,.building-top .el-table th.is-leaf {
    border-bottom:  1px solid #ccc;
  }

修改表格最底部颜色和高度

 #top .el-table::before{
   border-bottom:  1px solid #ccc;
    height: 2px
  }

修改表头字体颜色

#top .el-table thead {
    color: #8EB7FA;
    font-weight: 500;
  }

修改表格无数据背景，字体颜色

#top .el-table__empty-block{
    background: #16203C;
  }
#top .el-table__empty-text{
  color: #ccc
}

修改鼠标选中行的背景颜色

#top .el-table__body tr.current-row>td {
        background: #f57878 ;
    }

修改表格鼠标悬浮hover背景色

#top .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #114696;
}

让行内文字居中（除表头外）

.el-table td, .el-table th {
            text-align: center;
        } 

修改除表头外的表格内容的背景色：

这需要修改两个地方

修改普通行：

.bottomTableDiv /deep/ .el-table tr{
   background: #091B37;
    height:20px;
  }

.bottomTableDiv  /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background-color: #091B37;
  }

修改行高：

先修改字体大小、修改tr高度，最主要是修改td的padding，不然最小行高下不去

.bottomTableDiv /deep/  .el-table td{
    padding:0px 0px;  //默认上下是padding12px
  }

修改整个表格的水平和垂直滚动条

.bottomTableDiv /deep/  .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }

二、使用篇