需求：
鼠标移入表头：
关键点：
1、样式中添加
.el-table .cell {
word-break: keep-all !important;
white-space: nowrap !important;
}
2、在需要悬浮显示的表头文字过长处添加
:show-overflow-tooltip="true"
:render-header="renderHeader"
3、methods中添加：
renderHeader(h, data) {
return h("span", [
h(
"el-tooltip",
{
attrs: {
class: "item",
effect: "dark",
content: data.column.label,
placement: "top",
},
},
[h("span", data.column.label)]
),
]);
},
实现：
<template>
<div class="table-content">
<el-table
:data="tableData"
height="440"
:border="false"
:cell-style="cellStyle"
:header-cell-style="{
background: '#1C2E45',
height: '40px',
padding: '0',
color: '#a0b2d3',
}"
>
<template v-for="(item, index) in tableColumn">
<template v-if="item.prop == 'rank'">
<el-table-column
:key="index"
:label="item.title"
align="center"
header-align="center"
:show-overflow-tooltip="true"
:render-header="renderHeader"
>
<template slot-scope="scope">
<span
:class="[
scope.row.rank == 1 ? 'colorRank1' : 'rankColor',
scope.row.rank == 2 ? 'colorRank2' : 'rankColor',
scope.row.rank == 3 ? 'colorRank3' : 'rankColor',
]"
>{{ scope.row.rank }}</span
>
</template>
</el-table-column>
</template>
<template v-else-if="item.prop == 'monthOnMonth'">
<el-table-column
:key="index"
:label="item.title"
align="left"
header-align="center"
:show-overflow-tooltip="true"
:render-header="renderHeader"
>
<template slot-scope="scope">
<div>
<span
:class="
scope.row.monthOnMonth.slice(0, 1) == '-'
? 'triangleDown'
: 'triangleUp'
"
style="width: 10px; margin-right: 3px"
></span>
<span
:class="
scope.row.monthOnMonth.slice(0, 1) == '-'
? 'triangleColorRed'
: 'triangleColorGreen'
"
>{{
scope.row.monthOnMonth.slice(0, 1) == "-"
? scope.row.monthOnMonth.slice(1)
: scope.row.monthOnMonth
}}</span
>
</div>
</template>
</el-table-column>
</template>
<template v-else-if="item.prop == 'operation'">
<el-table-column
:key="index"
:label="item.title"
align="center"
header-align="center"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<button @click="deleteBtn(scope.row, scope.$index)">删除</button>
</template>
</el-table-column>
</template>
<template v-else>
<el-table-column
:key="index"
:label="item.title"
align="center"
header-align="center"
:prop="item.prop"
:show-overflow-tooltip="true"
>
</el-table-column>
</template>
</template>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableColumn: [
{
title: "排名11111",
prop: "rank",
width: 100,
},
{
title: "日期",
prop: "time",
width: 100,
},
{
title: "标题",
prop: "title",
width: 100,
},
{
title: "简介",
prop: "briefIntroduction",
width: 100,
},
{
title: "作者",
prop: "author",
width: 100,
},
{
title: "星级",
prop: "star",
width: 100,
},
{
title: "阅读量",
prop: "reading",
width: 100,
},
{
title: "同比22222222",
prop: "monthOnMonth",
width: 100,
},
{
title: "地址",
prop: "address",
width: 100,
},
// 删除按钮
{
title: "操作",
prop: "operation",
width: 100,
},
],
tableData: [
{
id: 1,
rank: 1,
time: "2004-08-17 00:12:56",
title: "标构青使",
briefIntroduction: "历农收任七其放感将养。",
author: "龚秀兰",
star: "★★",
reading: 3786,
monthOnMonth: "-74.33",
address: "江西省 鹰潭市 贵溪市",
},
{
id: 2,
rank: 2,
time: "1999-04-10 04:15:45",
title: "带间候构",
briefIntroduction: "价向会世维发无。",
author: "于洋",
star: "★★★",
reading: 4915,
monthOnMonth: "-15.73",
address: "上海 上海市 宝山区",
},
{
id: 3,
rank: 3,
time: "1975-07-18 03:13:32",
title: "油支二制布",
briefIntroduction: "存素易之只制图调。",
author: "韩勇",
star: "★★★★",
reading: 1373,
monthOnMonth: "28.28",
address: "上海 上海市 金山区",
},
{
id: 4,
rank: 4,
time: "2011-08-26 20:53:00",
title: "回情关走也状",
briefIntroduction: "规统水要厂身大有历易。",
author: "常明",
star: "★★★★",
reading: 1018,
monthOnMonth: "-3.95",
address: "河南省 鹤壁市 浚县",
},
{
id: 5,
rank: 5,
time: "1989-11-24 23:53:12",
title: "示强或南",
briefIntroduction: "义几小叫办广实己来部。",
author: "史勇",
star: "★★★★",
reading: 1027,
monthOnMonth: "55.54",
address: "香港特别行政区 香港岛 东区",
},
{
id: 6,
rank: 6,
time: "2011-06-19 15:28:12",
title: "领今得头",
briefIntroduction: "由东太程电东。",
author: "冯强",
star: "★★★★",
reading: 1565,
monthOnMonth: "53.72",
address: "陕西省 宝鸡市 陈仓区",
},
{
id: 7,
rank: 7,
time: "2010-12-14 13:09:47",
title: "参火矿还厂精必",
briefIntroduction: "族专金会时两采后转老山确感前强。",
author: "石强",
star: "★",
reading: 2751,
monthOnMonth: "-91.00",
address: "香港特别行政区 香港岛 湾仔",
},
{
id: 8,
rank: 8,
time: "1972-01-30 21:15:44",
title: "质期划复",
briefIntroduction: "严改们能选无队展并团此。",
author: "邹平",
star: "★★",
reading: 1341,
monthOnMonth: "35.31",
address: "山西省 临汾市 吉县",
},
{
id: 9,
rank: 9,
time: "2000-11-13 23:54:01",
title: "成家理增",
briefIntroduction: "观老级得传表命常般干可人看能。",
author: "熊娜",
star: "★★★★★",
reading: 4812,
monthOnMonth: "-6.77",
address: "海外 海外 -",
},
{
id: 10,
rank: 10,
time: "1998-10-08 09:16:46",
title: "律再算没部论",
briefIntroduction: "那千压收美管法给次。",
author: "曹强",
star: "★★★",
reading: 4485,
monthOnMonth: "-63.57",
address: "广东省 梅州市 平远县",
},
{
id: 11,
rank: 11,
time: "1974-07-16 04:23:01",
title: "打张拉单",
briefIntroduction: "龙方观天金中然青走往历说长。",
author: "乔丽",
star: "★★",
reading: 1051,
monthOnMonth: "-62.22",
address: "澳门特别行政区 澳门半岛 -",
},
{
id: 12,
rank: 12,
time: "2010-09-26 18:46:09",
title: "带百千转代程入",
briefIntroduction: "金白速风拉设来理了。",
author: "江秀兰",
star: "★★★",
reading: 600,
monthOnMonth: "45.85",
address: "福建省 漳州市 云霄县",
},
{
id: 13,
rank: 13,
time: "1980-09-04 04:22:48",
title: "分山下还业龙",
briefIntroduction: "关九深国积农离对不片府图然。",
author: "邵伟",
star: "★★",
reading: 2612,
monthOnMonth: "-59.20",
address: "重庆 重庆市 沙坪坝区",
},
{
id: 14,
rank: 14,
time: "2015-01-15 21:35:24",
title: "路被养段容些",
briefIntroduction: "件标情化长元形。",
author: "曹勇",
star: "★★★★",
reading: 3439,
monthOnMonth: "-98.60",
address: "天津 天津市 和平区",
},
{
id: 15,
rank: 15,
time: "1989-05-16 09:44:33",
title: "工道平收后什",
briefIntroduction: "等由切包天。",
author: "邹勇",
star: "★",
reading: 729,
monthOnMonth: "-44.02",
address: "安徽省 滁州市 南谯区",
},
{
id: 16,
rank: 16,
time: "1976-02-09 19:17:38",
title: "何第矿引",
briefIntroduction: "品县斗她和解证况级观。",
author: "薛超",
star: "★★★★",
reading: 2849,
monthOnMonth: "0.23",
address: "陕西省 汉中市 宁强县",
},
{
id: 17,
rank: 17,
time: "1975-05-13 15:10:43",
title: "目光往示",
briefIntroduction: "样义林系市小八克了存观么本数应。",
author: "锺静",
star: "★★★",
reading: 4888,
monthOnMonth: "-88.48",
address: "湖北省 荆州市 其它区",
},
{
id: 18,
rank: 18,
time: "1970-07-09 05:55:42",
title: "石期厂段段",
briefIntroduction: "状片名队切。",
author: "贺秀兰",
star: "★★★★★",
reading: 2889,
monthOnMonth: "22.17",
address: "重庆 重庆市 渝北区",
},
{
id: 19,
rank: 19,
time: "1974-02-10 20:45:50",
title: "高整根压打当非",
briefIntroduction: "身传放布再准就计对比料指市。",
author: "叶芳",
star: "★★★★★",
reading: 947,
monthOnMonth: "59.15",
address: "黑龙江省 伊春市 南岔区",
},
{
id: 20,
rank: 20,
time: "1980-11-21 22:15:48",
title: "群进政克据增",
briefIntroduction: "包构子布表应采规即四手矿装油。",
author: "林霞",
star: "★★★",
reading: 221,
monthOnMonth: "25.25",
address: "四川省 南充市 阆中市",
},
],
};
},
created() {},
methods: {
// 表格隔行换色
cellStyle(row, column, rowIndex, columnIndex) {
if (row.rowIndex % 2 == 0) {
return "background: #12243C;"; //双数行
} else {
return " background: #1C2E45;"; //单数行
}
},
// 表头
renderHeader(h, data) {
console.log(111, h);
console.log(222, data);
return h("span", [
h(
"el-tooltip",
{
attrs: {
class: "item",
effect: "dark",
content: data.column.label,
placement: "top",
},
},
[h("span", data.column.label)]
),
]);
},
deleteBtn(row, index) {
console.log("获取本行数据", row);
this.tableData.splice(index, 1); //删除
},
},
};
</script>
<style lang="scss">
.table-content {
margin-top: 50px;
width: 900px;
.el-table,
.el-table thead {
background: #192a3f !important;
font-size: 20px !important;
color: #a0b2d3 !important;
width: 100%;
}
.el-table .warning-row {
background: #102238;
}
.el-table .success-row {
background: #192a3f;
}
.el-table th.is-leaf,
.el-table td {
border: none !important;
}
.el-table .cell.el-tooltip {
white-space: nowrap;
}
// 不换行
.el-table .cell {
word-break: keep-all !important;
white-space: nowrap !important;
}
.el-table td {
height: 40px !important;
padding: 0 !important ;
}
.el-table__header-wrapper {
height: 40px !important;
padding: 0 !important ;
}
.el-table::before {
background-color: transparent !important;
}
.el-table tr {
background: transparent !important;
}
.el-table__body tr:hover > td {
// box-sizing: border-box !important;
// background: transparent !important;
background: #ebeef5 !important; //
}
.el-table__body tr:hover {
border: 1px solid #4285d6 !important;
box-shadow: rgba(66, 133, 214, 1) 0px 0px 10px inset;
}
// 表格
.el-table__row > td {
/* 去除表格线 */
border: none;
}
.el-table th.is-leaf {
/* 去除上边框 */
border: none;
}
.el-table::before {
/* 去除下边框 */
height: 0;
}
// 表头空格
.el-table th.gutter {
background: #1c2e45;
}
.el-table,
.el-table__expanded-cell {
background: #1c2e45;
}
// 滚动条
.el-table__body-wrapper::-webkit-scrollbar {
width: 6px;
height: 6px;
}
// 滚动条的滑块
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: rgb(75, 137, 212);
border-radius: 6px;
}
}
.el-tooltip__popper.is-dark {
// table 提示框样式
min-width: fit-content !important;
background: #192a3f !important;
color: #a0b2d3 !important;
font-size: 20px;
}
.triangleUp {
display: inline-block;
width: 10px;
height: 10px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAy0lEQVQoU2NkwAGCd7cWrnWt7scmzYhNUOPypM83xLl4NF5++3JDN48XXQ2GJr+9ndM36QpnwBT6XX47Y5NzeSayRhRNCesbBBZaybz/jyTK+J+BIf7YE8EFgQ0fYBpRNAk8nPH3AycLE7pzBL7/+fdBPoMZQ5P1iZ4bR5UE1HEFjPW9DzePWpRogOTBNoXtbAtYZSi2HpcGmHjY+VeBq9yrNoA1sT6f/f83M9aARDGH9e9/ht+SqYyMhuf6X5yX4RUnZAtM3vDJ55cATdVDgPKup9AAAAAASUVORK5CYII")
no-repeat;
// background: url("./images/triangleup.png") no-repeat;
background-size: 100% 100%;
}
.triangleDown {
display: inline-block;
width: 10px;
height: 10px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAA0ElEQVQoU2O8WpCySf3VN18GIsFNMa7NjCC1n+NjfnH+/sdKSN93VqbfvAuXsIE17a/K0LF58OkymIMD/GdgYDiiwKfr2DbjClzdxeKU2drPv6Xg0nRVkmuOfu+cVJA8iuEvU+NfC3/9LYKu8S036xvx2QtFYeIomvY3JHBY3fn9jfnff7j4XybG/8dUWLkcGxb8wKoJJHiiPDPG5PHHxTAFZ2T5Yy06py9Bth2r32/nJh9XfPvd4r4w5wnVyXMt0Z2LM8COVGU52rRN248tYAA5IEdl4FXGYQAAAABJRU5ErkJggg==")
no-repeat;
// background: url("./images/triangledown.png") no-repeat;
background-size: 100% 100%;
}
.triangleColorGreen {
color: #00ea9c;
}
.triangleColorRed {
color: #fc5a5a;
}
.colorRank1 {
color: #f50000 !important;
display: inline-block;
width: 25px;
height: 25px;
// background: url("./images/one.png") no-repeat;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAZCAYAAAArK+5dAAAAVElEQVRIS2N0V1L6z0Al8J+BoWHXvXuNyMYxUtMCkMHollDdAnRLaGIBsiU0swBmCU0tAFkyagHBHDQaRKNBRDAECCoYTUWjQUQwBAgqGE1FAx9EANPqOeuq6cSQAAAAAElFTkSuQmCC")
no-repeat;
background-size: 100% 100%;
}
.colorRank2 {
color: #ffa14c !important;
display: inline-block;
width: 25px;
height: 25px;
// background: url("./images/two.png") no-repeat;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAZCAYAAAArK+5dAAAAVElEQVRIS2O0NbP8z0Al8J/hf8ORUycakY1jpKYFIIPRLaG6BeiW0MQCZEtoZgHMEppaALJk1AKCOWg0iEaDiGAIEFQwmopGg4hgCBBUMJqKBj6IABwOQZ8e9IH5AAAAAElFTkSuQmCC")
no-repeat;
background-size: 100% 100%;
}
.colorRank3 {
color: #00f5a1 !important;
display: inline-block;
width: 25px;
height: 25px;
// background: url("./images/three.png") no-repeat;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAZCAYAAAArK+5dAAAAVElEQVRIS2MU8Q/4z0At8J+h4c2mDY3IxjFS1QKQyWiWUN8CNEtoYwGSJbSzAGoJbS1gYGAYtYBgDhoNotEgIhgCBBWMpqLRICIYAgQVjKaigQ8iAKQQPTMaLCH1AAAAAElFTkSuQmCC")
no-repeat;
background-size: 100% 100%;
}
.rankColor {
color: #4f9efd;
}
</style>
4120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
