el-table 样式自定义

article/2025/9/14 12:09:53

1.el-table 样式自定义

效果图:

// tableRowClassName 通过值判断是否添加加class,
// header-cell-style 头部样式
// row-style 行的样式
// cell-style 每个item 的样式 
<el-table style="margin-bottom: 20px" :data="pmPopList" :row-class-name="tableRowClassName"@row-click='towenti':header-cell-style="{'background-color': '#04112d','height': '50px','padding': '0','text-align': 'center','border-bottom': '1px solid #454c69','font-size':'20px','color':'#d4e4fb'}" :row-style="{'background-color': '#04112d','font-size':'20px','color':' #97c0fc','cursor':'pointer'}" :cell-style="{'height': '60px','font-size':'20px','text-align': 'center','line-height': '60px','padding': '0','border-bottom': '0px','border-bottom': '1px solid #454c69',}" height="660" ref="table"><el-table-column width="100" type="index" label="序号"></el-table-column><el-table-column  prop="xzq" label="措施"></el-table-column><el-table-columnshow-overflow-tooltip = 'true'width="200"prop="szlb" label="措施描述" ></el-table-column></el-table>

<srcpit>
data() {return {pmPopList: [{xzq: '以控源截污为基础手段',szlb: `一是开展污水收集系统排查工作，重点完成市政污水管网、用户
接入管网、工业废水纳管的排查整治，同时加强空白区管网建设，提
高污水收集率'`}],}
}
tableRowClassName({row,rowIndex
}) {
// item的长度大于100 时 这row添加warning-row 的样式return row.xzq.length > 100  ? 'warning-row' : '';
},
</srcpit><style scoped>/deep/ .el-table,
/deep/ .el-table__expanded-cell,
/deep/ .el-table th,
/deep/ .el-table tr {background-color: transparent; // 采用大屏本来的样式，自身设为透明色
}.mp-pop >>> .el-table tr:hover, // 鼠标hover上去的颜色
.mp-pop >>> .el-table--enable-row-hover .el-table__body tr:hover>td {background-color: rgba(0, 0, 0, .5);
}.mp-pop >>> .el-table--border,
.mp-pop >>> .el-table--group,
.mp-pop >>> .el-table--border::after,
.mp-pop >>> .el-table--group::after,
.mp-pop >>> .el-table--border::after,
.mp-pop >>> .el-table--group::after,
.mp-pop >>> .el-table::before {border: none;background-color: transparent;  // 设置el-table boder的颜色设为透明色
}
/deep/ .el-table .warning-row td {color: #ff3300 !important;
}
</style>

2.el-table设置多行显示省略号

<el-table-column align="center" prop="zhenGaiCuoShi" width="300" label="整改措施"><template slot-scope="{row}"><el-tooltip effect="dark" :content="row.zhenGaiCuoShi" placement="top" popper-class="custom_tooltip"><divstyle="width:100%;padding: 0px;display: -webkit-box;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;white-space: normal">{{row.zhenGaiCuoShi}}</div></el-tooltip></template></el-table-column>//style 自定义提示窗样式.custom_tooltip {color: red;width: 1000px !important;height: 400px !important;}

效果图：

原生js的方式设置多行显示省略号

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><style>/*修改提示框*/#mytitle {position: absolute;color: #fff;max-width: 600px;font-size: 14px;padding: 4px;background: rgba(40, 40, 40, 0.8);border: solid 1px #e9f7f6;border-radius: 5px;}</style>
</head><body><div class="mytooltip" title="个性样式">格式样式:</div><script type="text/javascript">$(function () {var x = 10;var y = 20;var newtitle = '';$('div.mytooltip').mouseover(function (e) {newtitle = this.title;this.title = '';$('body').append('<div id="mytitle" >' + newtitle + '</div>');$('#mytitle').css({'left': (e.pageX + x + 'px'),'top': (e.pageY + y - 80 + 'px')}).show();}).mouseout(function () {this.title = newtitle;$('#mytitle').remove();}).mousemove(function (e) {$('#mytitle').css({'left': (e.pageX + x + 10 + 'px'),'top': (e.pageY + y - 60 + 'px')}).show();})});</script>
</body></html>

3.去除el-table的背景色

效果图：

代码块：

<div class="user_skills" style="width: 100%"><el-table:data="hitchLIst"bordermax-height="775"style="width: 100%":header-cell-style="{background:'url(/static/img/web/hitch_header.png) no-repeat',height: '90px',padding: '0','text-align': 'center',border: 'none','font-size': '26px',color: '#00c6ff','font-family': 'Adobe Heiti Std','font-weight': 'normal',}":row-style="{'background-color': 'transparent',background:'url(/static/img/web/hitch.png) no-repeat','font-size': '30px',color: ' #fffefe',cursor: 'pointer',// margin: '19px 0',}":cell-style="{height: '90px','text-align': 'center','line-height': '60px',padding: '0',border: 'none','font-family': 'MicrosoftYaHei','font-weight': 400,color: '#ffffff','line-height': 'auto','font-size': '30px',}"ref="table"><el-table-columnlabel="序号"align="center"><template slot-scope="scop"><div:class="[scop.$index + 1 < 4? activeCls: errorCls,'index',]">{{ scop.$index + 1 }}</div></template></el-table-column><el-table-columnprop="address"label="地点"></el-table-column><el-table-column prop="time" label="时间"></el-table-column><el-table-columnprop="person"label="负责人"></el-table-column><el-table-columnprop="des"width="400px"label="请情"></el-table-column></el-table></div><style scoped>
.user_skills {width: 96% !important;margin: auto;
}
.user_skills /deep/ .el-table--fit {padding: 20px 20px 20px 20px;
}
.user_skills /deep/ .el-table,
.el-table__expanded-cell {background-color: transparent;border: transparent;
}.user_skills /deep/ .el-table tr {background-color: transparent !important;
}
.user_skills/deep/.el-table--enable-row-transition.el-table__bodytd,
.el-table .cell {background-color: transparent;
}
.user_skills /deep/ .el-table .cell {line-height: 60px !important;
}
.el-table::before {left: 0;bottom: 0;width: 100%;height: 0px;
}
.user_skills /deep/ .el-table--border::after { // 去除右侧得1px 得线条 background-color: transparent !important;
}
::v-deep.el-table tbody tr:hover > td { // 修改hover上去得颜色background-color: rgba(129, 151, 161, 0.4) !important;color: #ffffff;
}
</style>