el-table改变样式颜色等特性

24 篇文章 0 订阅
/* 表格样式 */
*/deep/ .el-table {
  /* color: rgba(12, 59, 124, 0.7); */
  background-color: #101d3f;
}

*/deep/ .el-table tr {
  background-color: #00bbf0;
  color: #fff;
}

/* 表格整体颜色(除行之外) */
*/deep/ .el-table__body-wrapper {
  background-color: #101d3f;
}


*/deep/ .el-table__empty-text {
  color: #fff;
}

*/deep/ .el-form-item__label {
  color: #fff;
}

/* 去掉边框 */
*/deep/ .el-table th.el-table__cell {
  border: 0px;
}

/* 表格背景色 */
*/deep/ .el-table td {
  background-color: #101d3f;
}

/* 鼠标经过表格不变色 */
*/deep/ .el-table tbody tr:hover>td {
  background-color: #101d3f !important
}
/* 有固定列的时候,改变样式 */
*/deep/ .el-table tbody tr.hover-row .el-table__cell{
  background-color: #101d3f !important;
}

*/deep/ .el-table--border {
  border: none;

  border: 0px;

}

*/deep/ .el-table td.el-table__cell {
  border: 0px;

}

.el-table::before {
  height: 0px;

}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Element UI的`el-table`组件中,你可以使用多种方法来改变单元格(cell)的样式。以下是一些常见的方法: 1. **内联样式**:可以直接在`<el-table-column>`的`cell-style`属性中设置CSS样式,例如: ```html <el-table-column prop="name" label="姓名" cell-style="background-color: #f2f2f2; color: #333;"> ``` 这将为每一行的该列设置特定的背景颜色和文本颜色。 2. **数据绑定样式**:如果你想要根据数据动态改变样式,可以在`render-cell`函数中获取当前行的数据并应用样式,例如: ```javascript <template> <el-table-column prop="name" label="姓名" :cell-render="customRender" ></el-table-column> </template> <script> export default { methods: { customRender(h, { row, column, $index }) { return h('span', { style: { backgroundColor: row.color }, // 假设color属性存在于row对象 'data-index': $index, }, row.name); }, }, }; </script> ``` 这里,`customRender`函数会获取`color`属性并应用到元素上。 3. **自定义组件**:如果需要更复杂的样式或交互,可以创建一个自定义的组件并在`cell`属性中使用。 4. **CSS类名**:你也可以为单元格添加类名,然后在外部样式表中定义规则。 相关问题--: 1. 如何在Element UI的`el-table`中使用CSS类名改变单元格样式? 2. 如何在`el-table`中根据数据动态渲染并应用样式? 3. `el-table-column`的`cell-render`属性如何帮助定制单元格样式
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值