Element UI 之table表格的封装

需求：

鼠标移入：

实现：

<template><el-tableclass="table-list":data="tableData"height="440"style="width: 1000px":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":width="item.width"><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":width="item.width"><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":width="item.width"><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":width="item.width"></el-table-column></template></template></el-table>
</template><script>
export default {data() {return {tableColumn: [{title: "排名",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: "同比",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;"; //单数行}},deleteBtn(row, index) {console.log("获取本行数据", row);this.tableData.splice(index, 1); //删除},},
};
</script>
<style lang="scss">
.table-list {&.el-table {font-size: 20px;width: 100%;height: 100%;background: #192a3f !important;&::before {height: 0;}.is-leaf {border: none;}thead {border-bottom: 2px solid rgba(255, 255, 255, 1);}th {background: transparent;border-bottom: none;.cell {font-weight: bold;color: #a0b2d3;}}tr {height: 40px; //&.el-table__row:hover {td {background: #ebeef5 !important; //划过 背景颜色}}}td {background: transparent;border-bottom: none;padding: 0;.cell {overflow: hidden;font-weight: bold;color: #a0b2d3;}}// 滚动条宽高.el-table__body-wrapper::-webkit-scrollbar {width: 5px;height: 5px;}// 滚动条的滑块.el-table__body-wrapper::-webkit-scrollbar-thumb {background-color: rgb(75, 137, 212);border-radius: 5px;}// 滚动条背景颜色.el-table__body-wrapper::-webkit-scrollbar-track-piece {background-color: #1c2e45;}}
}
.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>

注意点：

1、el-table-column的宽度width须提供，只设置其中部分width或者不设置width,将会出现以下情况

2、el-table-column的width相加等于el-table的width的大小，否则将出现上图的错位的现象

以上

Element UI 之table表格的封装相关推荐

Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
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 ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
element ui 的table的表头和表格没对齐
在 app.vue的style里面加上 /* 解决element-ui的table表格控件表头与内容列不对齐问题 */.el-table th.gutter{display: table-cell!i ...
二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...

Element UI 之table表格的封装

Element UI 之table表格的封装相关推荐

最新文章

热门文章