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

<template>
  <!-- 表格---------------------------------------- -->
  <div class="table">
    <el-table :data="tableBodyData" stripe :height="total<=5? 550 : 480">
      <el-table-column
        v-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-pagination
      style="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>