elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table

<template><!-- 表格---------------------------------------- --><div class="table"><el-table :data="tableBodyData" stripe :height="total<=5? 550 : 480"><el-table-columnv-for="(a, $i) in tableHeadData":key="$i":label="a.label":width="a.width":min-width="a.minWidth"show-overflow-tooltip><template slot-scope="scope"><span :color="getColor(a.fieldName, scope.row[a.fieldName])">{{scope.row[a.fieldName]}}</span></template></el-table-column></el-table><el-paginationstyle="margin-top: 20px":hidden="total<=5"@size-change="initTableData"@current-change="initTableData":total="total":page-sizes="[5, 10, 20, 50]":page-size.sync="pageSize":current-page.sync="currentPage"layout="total, sizes, prev, pager, next, jumper"></el-pagination></div><!-- ---------------------------------------- -->
</template><script>
export default {data() {return {// 表格相关数据----------------------------------------tableHeadData: [],tableBodyData: [],currentPage: 1,pageSize: 10,total: 0,// ----------------------------------------};},created() {this.tableHeadData = [{ label: "字段名1", fieldName: "fieldName1", width: 100 },{ label: "字段名2", fieldName: "fieldName2", minWidth: 300 },{ label: "字段名3", fieldName: "fieldName3", width: 120 },{ label: "字段名4", fieldName: "fieldName4", width: 100 },{ label: "字段名5", fieldName: "fieldName5", width: 160 },];this.tableBodyData = [{fieldName1: "红色预警",fieldName2: "值2",fieldName3: "值3",fieldName4: "值4",fieldName5: "值5",},{fieldName1: "值1",fieldName2: "橙色预警",fieldName3: "值3",fieldName4: "值4",fieldName5: "值5",},{fieldName1: "值1",fieldName2: "值2",fieldName3: "黄色预警",fieldName4: "值4",fieldName5: "值5",},{fieldName1: "值1",fieldName2: "值2",fieldName3: "值3",fieldName4: "值4",fieldName5: "值5",},{fieldName1: "值1",fieldName2: "值2",fieldName3: "值3",fieldName4: "值4",fieldName5: "值5",},{fieldName1: "值1",fieldName2: "值2",fieldName3: "值3",fieldName4: "值4",fieldName5: "值5",},{fieldName1: "值1",fieldName2: "值2",fieldName3: "值3",fieldName4: "值4",fieldName5: "值5",},{fieldName1: "值1",fieldName2: "值2",fieldName3: "值3",fieldName4: "值4",fieldName5: "值5",},{fieldName1: "值1",fieldName2: "值2",fieldName3: "值3",fieldName4: "值4",fieldName5: "值5",},{fieldName1: "值1",fieldName2: "值2",fieldName3: "值3",fieldName4: "值4",fieldName5: "值5",},];this.total = this.tableBodyData.length;},methods: {initTableData() {//加载数据----------------------------------------/* var d = {current: this.currentPage,size: this.pageSize,};this.$d.getTableData(d, {s: (d) => {// this.hideLoad();this.total=d.total;this.tableBodyData=d;},}); */// ----------------------------------------},getColor(type, value) {switch (type) {case "fieldName1":case "fieldName2":case "fieldName3":return value;break;}return "";},},
};
</script><style lang='scss' >
// 各种预警颜色----------------------------------------
[color="红色预警"] {color: #dc2e08;
}
[color="橙色预警"] {color: #ff7834;
}
[color="黄色预警"] {color: #fff840;
}
// 表格----------------------------------------.el-table th {background-color: #0a2247;color: white;font-size: 14px;font-weight: bold;
}.el-table--striped .el-table__body tr.el-table__row--striped td {background: #071435; //斑马纹
}
.el-table td,
.el-table th {text-align: center;border-bottom: 1px solid #0a365d;border-left: 1px solid #0a365d;padding: 8.88px 0;&:first-of-type {border-left: none;}
}
.el-table th.is-leaf {border-color: #0c416c;
}
.el-table td.gutter,
.el-table th.gutter {border: none;
}
.el-table tr {background-color: #040b2a;color: #10c3ff;&:hover {color: white;& > td {background-color: #0a2247 !important;}}
}
.el-table,
.el-table__expanded-cell {background-color: transparent;
}
.el-table,
.el-table__expanded-cell,
.el-table--border::after,
.el-table--group::after,
.el-table::before {background-color: transparent;
}
.el-table__empty-text {line-height: 500px;color: #0c416c;
}
// 翻页----------------------------------------
.el-pagination {text-align: center;
}
.el-pagination,
.el-pagination * {transition: 0.2s ease-out;
}
.el-pagination .btn-next,
.el-pagination .btn-prev {background: none;color: #00c8ff;
}
.el-dialog,
.el-pager li,
.el-pagination__jump,
.el-pagination__total {color: #00c8ff99;background: none;
}
.el-pagination button:disabled {color: #00c8ff55;background-color: transparent;
}
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {color: #00c8ff99;
}
.el-input__inner {background: transparent;border-color: #2f4685;color: #0080b9;
}
.el-input__icon {color: #2f4685 !important;
}
.el-select:hover .el-input__inner {border-color: #00c8ff;
}
//----------------------------------------
</style>

elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table相关推荐

一个实用的表格（锁定表头，可调整单元格大小，可排序）
昨天在网上找到一个不错的表格显示,该表格可以锁定表头,可调整单元格的大小,同时还可以对数据进行排序,显示效果如下: 原代码: <!DOCTYPE HTML PUBLIC "-//W3C ...
antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
一.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
1.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决.css 按照官网说的 ...
自己动手写一个分库分表中间件（三）数据源路由实现
相关文章: 自己动手写一个分库分表中间件(一)思考自己动手写一个分库分表中间件(二)数据源定义和分片代理层设计排查项目中读写分离失效原因小议 Java 内省机制注:本文内容暂不涉及事务相关的问 ...
如何用java写一个九九乘法表。
在java中写一个九九乘法表,我们只需要用一个for循环嵌套就可以了,我们先写一个for循环嵌套格式, for(;;){for(;;) 然后我们知道内循环和外循环所控制行和列,我们可以看出来九九乘法表 ...
el-table在有些电脑上显示问题（表头与表体不对齐gutter列导致得）
el-table在个别电脑上得表头与表体不对齐(是因为没有滚动条时表头得gutter列得width为17px引起得) 其中gutterHidden初始默认为false <el-table :cl ...
C++从0到1手写一个哈希表
C++从0到1手写一个哈希表简易版哈希表优化哈希表目的:手写实现一个哈希表,采用拉链法构建,每个hash(key)对应的是一个红黑树. 看起来很简单,但可以学到很多东西.实现语言:C++. 简易 ...
Python|xlwt|xlrd|调整单元格样式（背景，字体，对齐、虚线边框、列宽行高、添加公式）|xlutils|openpyxl|只读与只写|图表|语言基础50课：学习（8）
文章目录系列目录原项目地址第24课:用Python读写Excel文件-1 Excel简介安装读Excel文件(行列索引从`0`开始) 写Excel文件调整单元格样式(背景,字体,对齐.虚线 ...
Python+Excel系列：批量处理Excel文件的模块—xlwings：创建、保存、打开工作簿，操控工作表和单元格
文章目录认识xlwings模块 1.创建工作簿 2.保存工作簿 3.打开工作簿 4.操控工作表和单元格综合实例认识xlwings模块可以用来处理Excel文件的python模块很多,如Xlsx ...

elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table

elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table相关推荐

最新文章

热门文章