Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示

需求

鼠标移入表头

关键点:

1.样式中添加:(如果在scope中会不起作用)

.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: "上海 上海市 金山区",},数据部分........],};},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;}...部分</style>

转载处:/qq_43519782/article/details/116647539