element ui 固定表头表格及好看样式

<template>
    <div class="entirety_content">
        <el-table
            class="table_all"
            ref="multipleTable"
            :data="tableData"
            height="calc(100% - 66px)"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <!-- 复选框 -->
          <!-- <el-table-column type="selection" width="55"> </el-table-column> -->

          <el-table-column
              width="60"
              type="index"
              :index="index"
              label="序号"
          >
          </el-table-column>
          <el-table-column
              prop="date"
              label="发生时间"
              width="200"
          >
          </el-table-column>
          <el-table-column
              prop="name"
              label="系统名称"
          >
          </el-table-column>
          <el-table-column
              prop="address"
              label="模块名称"
          >
          </el-table-column>
          <!-- //设置表格中的文字颜色  如 -->
          <!-- <el-table-column
              prop="_source.logLevel"
              label="级别"
              width="100"
          >
            <template v-slot="{row}">
              <span :style="activation(row._source.logLevel)">{{row._source.logLevel }}</span>
            </template>
          </el-table-column> -->


          <!-- 操作按钮写法 -->
          <!-- <el-table-column
              label="操作"
              prop="_source"
              width="100">
            <template v-slot="{row}">
              <div @click="handleDrawerOpen(row._source)" class="table-btn" style="margin: 0">
                <img src="../../assets/1_15.png"/>
                <span style="margin-left: 5px">详情</span>
              </div>
            </template>
          </el-table-column> -->


        </el-table>
    </div>
  </template>
<script>
 export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
        ],
      }
    },

    methods: {
    //   获取复选框数据
      handleSelectionChange(val) {
        console.log(val);
      },
    },
  }
</script>
</script>
<style lang='scss'>
  .el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: rgba(10,75,118,0.7) !important;
  }

  .el-table--enable-row-transition .el-table__body td.el-table__cell,
  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
    border: 1px solid #508e9b;
    //text-align: center;
  }
  .el-table{
    background: transparent;
    --el-table-border-color: transparent;
    border: 1px solid #508e9b;
    th.el-table__cell{
      //background: #0c5382;
      background: #2c5771;
    }
    .el-checkbox{
      --el-checkbox-bg-color:transparent;
      --el-checkbox-checked-bg-color:transparent;
    }
    .cell{
      color:#f1f1f1;
    }
    tr{
      //background: rgba(5,47,80,0.5);
      background: #1d3a54;
    }
    tr:nth-child(odd){
      //background: rgba(12,83,130,0.5);
      background: #0e2942;
    }
    td.el-table__cell{
      border-bottom: 2px solid #0c5382;
    }
    .xq_btn{
      cursor: pointer;
      color:#0378ab;
    }
    .table-btn {
      float: left;
      margin: 0px 6px;
      color: #169bd5;
      font-size: 16px;
      cursor: pointer;
    }
  }
  
  </style>