【element

2023-05-19 07:04| 来源: 网络整理| 查看: 265

1、修改斑马线表格背景

vue3使用：

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td { background: #ccc; }

vue2使用：

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td { background: #ccc; }

2、修改表格头部背景

vue3使用：

::v-deep .el-table th{ background: #CCCCCC; }

vue2使用：

/deep/ .el-table th{ background: #CCCCCC; }

3、修改表格行背景

vue3使用：

::v-deep .el-table tr{ background: #eee; }

vue2使用：

/deep/ .el-table tr{ background: #eee; }

4、修改表头字体颜色

vue3使用：

::v-deep .el-table thead { color: #ccc; font-weight: 700; }

vue2使用：

/deep/ .el-table thead { color: #ccc; font-weight: 700; }

5、修改行内线的颜色

vue3使用：

::v-deep .el-table td,.building-top .el-table th.is-leaf { border-bottom: 2px solid #eee; }

vue2使用：

/deep/ .el-table td,.building-top .el-table th.is-leaf { border-bottom: 2px solid #eee; }

6、修改表格最底部边框颜色和高度

vue3使用：

::v-deep .el-table::before{ border-bottom: 1px solid #ccc; height: 3px }

vue2使用：

/deep/ .el-table::before{ border-bottom: 1px solid #ccc; height: 3px }

7、修改表格内容字体颜色和字体大小

vue3使用：

::v-deep .el-table{ color: #6B91CE; font-size: 14px; }

vue2使用：

/deep/ .el-table{ color: #6B91CE; font-size: 14px; }

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

vue3使用：

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td { background-color: pink; }

vue2使用：

/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td { background-color: pink; }

【本文地址】

今日新闻