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

转载处:https://blog.csdn.net/qq_43519782/article/details/116647539

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

Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
vue antd a-table组件设置表头鼠标移入悬浮显示（自定义的表头）
1.看之前,请先异步另一篇文章 antdv table组件封装成全局组件以及携带自定义表头展示 2.具体需求,鼠标移入显示文本 3.参考大佬的文章:a-table组件设置表头鼠标移入悬浮显示 4.在公 ...
element ui 的table的表头和表格没对齐
在 app.vue的style里面加上 /* 解决element-ui的table表格控件表头与内容列不对齐问题 */.el-table th.gutter{display: table-cell!i ...
Element UI 之table表格的封装
需求: 鼠标移入: 实现: <template><el-tableclass="table-list":data="tableData"hei ...
element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图解决方法: Step1:在app.vue中加入css样式 <st ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
Element UI动态生成多级表头
1 基础常用的原型样例我们常常遇到的情况就是表头固定的,我们需要从后端获取对应表头的信息,如果信息比较多的时候为了方便我们展示,可以固定表头和列,下面是一个我们常见的例子: 固定列和表头可以同时使用 ...

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

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

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

最新文章

热门文章