element-ui 自定义table表格样式

最新推荐文章于 2024-07-30 10:39:47 发布

Mr.XiaoYang

最新推荐文章于 2024-07-30 10:39:47 发布

阅读量2.7w

点赞数 2

本文链接：https://blog.csdn.net/qq_36718999/article/details/92784438

版权

vue 进阶之旅专栏收录该内容

9 篇文章 0 订阅

订阅专栏

查更多资源

1.案例说明：

vue项目中，使用element-ui，根据设计，更改table表格样式，包括表头、字体、背景色、边框、鼠标动作等；

2.案例图示：

3.案例代码 - 方法一：

4.案例代码 - 方法二：

//自定义-表格样式 
.table-text-blue{
 color: $blueColor;
 cursor:pointer;
}
.table-text-gray{
  color: $grayColor;
}
.el-table th.is-leaf{
  background:#F9F9F9; 
  border-bottom: none;
}
.el-table--border th{
  border-color:#FFF;
  font-weight: normal;
}
.el-table--border{
  border:none;
}
.el-table,.el-table thead{
  color:$tableColor;
}
.el-table--border::after, .el-table--group::after{
  background-color: #fff;
}
.el-table--border td{
  border-right: 1px solid $tableBc;
}

更多资源 - 免费分享