el-table 自定义表格样式

.tableClassname {
	background-color: rgba(0, 0, 0, 0);
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(135, 205, 254, 0);
  }

  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0);
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: rgba(255, 255, 255, 0.3);
  }

  ::-webkit-scrollbar-thumb:hover {
    border-radius: 5px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    /*background-color:rgba(7, 170, 247, 1);*/
    cursor: pointer;
  }
  // 表格行的背景色
  .el-table th, .el-table tr{
	background-color: transparent 
	}
	// 表头的背景色
	.el-table__header .cell{
		background:linear-gradient(to bottom, #0062e8 ,   #00a8ff) !important;
	color:white;
		line-height: 36px;
		height: 36px;
	}
	// 偶数行的背景色
	.el-table--striped .el-table__body tr.el-table__row--striped td{
		background-color: rgba(0, 59, 139, 0.5) 
	  }
	// 鼠标移动时的行背景色
	 .el-table--enable-row-hover .el-table__body tr:hover > td {
		background-color: rgba($color: #1560c9, $alpha: 0.8) !important;
	  }
// 子元素后面插入内容。
	  .el-table--border::after, .el-table--group::after, .el-table::before{
		background-color: transparent 
	  }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tableElement UI中的一个表格组件,可以通过自定义样式来改变表格的外观和交互效果。以下是一些自定义样式的方法: 1. 使用scoped CSS:在组件中使用scoped CSS,可以避免样式污染和冲突。例如: ``` <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> </template> <style scoped> .el-table th, .el-table td { text-align: center; } </style> ``` 2. 使用CSS类名:可以通过添加CSS类名来自定义表格的样式。例如: ``` <template> <el-table :data="tableData" class="my-table" style="width: 100%"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> </template> <style> .my-table th, .my-table td { text-align: center; } </style> ``` 3. 使用slot-scope:可以通过slot-scope来自定义表格的单元格内容和样式。例如: ``` <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="Name"> <template slot-scope="{ row }"> <span :class="{ 'highlight': row.age > 30 }">{{ row.name }}</span> </template> </el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> </template> <style> .highlight { color: red; } </style> ``` 以上是el-table自定义样式的一些方法,可以根据实际需求选择合适的方法来实现自定义样式
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值