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的颜色设为透明色}</style>
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="/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>
