需求：
鼠标移入表头：
关键点：
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: "-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: "-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: "-06-19 15:28:12",title: "领今得头",briefIntroduction: "由东太程电东。",author: "冯强",star: "★★★★",reading: 1565,monthOnMonth: "53.72",address: "陕西省 宝鸡市 陈仓区",},{id: 7,rank: 7,time: "-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: "-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: "-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>
