iot-ui-plus/src/views/data-visual/components/table.vue

<template>
  <div class="tableInfo">
    <el-table
      class="tableClass"
      :data="tableData"
      header-row-class-name="headerRow"
      header-cell-class-name="headerCell"
      row-class-name="rowClass"
      cell-class-name="cellClass"
      stripe
    >
      <el-table-column prop="id" label="序号" align="center" width="80" />
      <el-table-column prop="name" label="换热站" align="center" width="180" show-overflow-tooltip />
      <el-table-column prop="date" label="Date" align="center" />
      <el-table-column prop="name" label="Name" align="center" />
      <el-table-column prop="address" label="Address" align="center" />
    </el-table>
  </div>
</template>
<script lang="ts" setup>
const tableData = [
  {
    id: '1',
    date: '2016-05-03',
    name: '大唐管井',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    id: '11',
    date: '2016-05-02',
    name: '汪家鑫城二期',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    id: '12',
    date: '2016-05-04',
    name: '东湖紫东苑（兆城紫东苑）',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    id: '22',
    date: '2016-05-01',
    name: '汪家鑫城一期B区A区C区',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    id: '1',
    date: '2016-05-03',
    name: '大唐管井',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    id: '11',
    date: '2016-05-02',
    name: '汪家鑫城二期',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    id: '12',
    date: '2016-05-04',
    name: '东湖紫东苑（兆城紫东苑）',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    id: '22',
    date: '2016-05-01',
    name: '汪家鑫城一期B区A区C区',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    id: '1',
    date: '2016-05-03',
    name: '大唐管井',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    id: '11',
    date: '2016-05-02',
    name: '汪家鑫城二期',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    id: '12',
    date: '2016-05-04',
    name: '东湖紫东苑（兆城紫东苑）',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    id: '22',
    date: '2016-05-01',
    name: '汪家鑫城一期B区A区C区',
    address: 'No. 189, Grove St, Los Angeles'
  }
];
</script>
<style lang="scss" scoped>
.tableInfo {
  height: 378px;
  margin-top: 20px;
  border: 1px solid #3776b8;
  overflow: hidden;
  :deep(.tableClass) {
    height: 376px;
    font-size: 18px;
    --el-table-border: none;
    --el-table-text-color: #d2def6;
    --el-table-header-text-color: #d2def6;
    --el-table-row-hover-bg-color: none;
    --el-table-header-bg-color: #0d1015;
    --el-table-tr-bg-color: #0d1b35;
    --el-fill-color-lighter: #0d1015;
    .headerCell,.cellClass{
      padding: 12px 0;
    }
    .el-table__inner-wrapper::before {
      content: none;
    }
    .el-table__inner-wrapper {
      .cellClass:hover {
        background-color: transparent;
      }
    }
    // .headerRow {
    //   .headerCell {
    //     border-bottom: none;
    //     background-color: #0d1015;
    //   }
    // }
    // .rowClass {
    //   background-color: #0d1b35;
    //   .cellClass {
    //     border-bottom: none;
    //     background-color: #0d1b35;
    //   }
    // }
    // .rowClass.el-table__row--striped {
    //   .cellClass {
    //     background-color: #0d1015;
    //   }
    // }
  }
}
</style>