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-column
show-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">
<div
style="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"
border
max-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-column
label="序号"
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-column
prop="address"
label="地点"
>
</el-table-column>
<el-table-column prop="time" label="时间">
</el-table-column>
<el-table-column
prop="person"
label="负责人"
>
</el-table-column>
<el-table-column
prop="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__body
td,
.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>今天的文章el-table 样式自定义分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/33847.html
