zhgkpt-datav/components/BasicTable/index.vue

<script>
import { Table as ElTable, TableColumn as ElTableColumn } from "element-ui";

export default {
  name: "BasicTable",
  components: {
    ElTable,
    ElTableColumn,
  },
  data() {
    return {};
  },
};
</script>

<template>
  <el-table
    class="basic-table"
    style="width: 100%"
    header-row-class-name="basic-table-header-row"
    row-class-name="basic-table-row"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot />
  </el-table>
</template>

<style lang="less">
.basic-table.el-table {
  background: none;
}
.basic-table.el-table .basic-table-header-row {
  background-color: transparent;
}
.basic-table.el-table .basic-table-header-row .el-table__cell {
  background-color: rgba(0, 133, 255, 0.25);
  text-align: center;
  color: #fff;
  border-bottom: none;
}
.basic-table.el-table .basic-table-row {
  background-color: transparent;
}
.basic-table.el-table .basic-table-row:hover {
  cursor: pointer;
}
.basic-table.el-table .basic-table-row .el-table__cell {
  background-color: rgba(7, 61, 100, 0.35);
  color: #fff;
  border-bottom: 1px dashed #5290a7;
  text-align: center;
}
.basic-table.el-table .basic-table-row:nth-last-child(1) .el-table__cell {
  border-bottom: none;
}
.basic-table.el-table.el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: rgba(0, 213, 255, 0.2);
}

.basic-table.el-table tr {
  background-color: transparent;
  color: #fff;
}
.basic-table.el-table .basic-table-row {
  width: 100%;
}
.basic-table.el-table::before {
  height: 0px;
}
// .basic-table.el-table td.el-table__cell, .basic-table.el-table th.el-table__cell.is-leaf {
//   background-color: rgba(7, 61, 100, .35) !important;
//   color: #fff;
//   border-bottom: 1px solid #5290a7;
// }
// .basic-table.el-table .el-table__header-wrapper th.el-table__cell.is-leaf {
//   background-color: rgba(0, 133, 255, .25) !important;
//   color: #fff;
//   border-bottom: none;
// }
// .basic-table.el-table .el-table__column-resize-proxy   {
//   border-bottom-width: 0px;
// }
</style>