<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-pagination控件有一个:hide-on-single-page属性
虽然这个属性也可以达到“当数据总条数小于一定数量”就隐藏翻页控件的作用，但是首次加载控件的时候不会判断，非得用户去使用了翻页控件里面的下拉框修改每页显示条数的时候才会触发隐藏的判断，所以从这个角度出发我不推荐大家使用:hide-on-single-page属性
还是老老实实用:hidden吧~
