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, .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, .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, .20) ;
}

.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>