通用el-table 修改样式

通用el-table 修改样式

el-table实现下图效果:

<template>
  <div class="contentbox">
    <el-table
      :data="tableData"
      height="310"
      style="width: 40%"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column prop="p1" label="姓名"> </el-table-column>
      <el-table-column prop="p2" label="年龄"> </el-table-column>
      <el-table-column prop="p3" label="生日"> </el-table-column>
      <el-table-column prop="p4" label="职务"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          p1: "测试",
          p2: "5",
          p3: "5",
          p4: "1",
        },
        {
          p1: "测试",
          p2: "5",
          p3: "5",
          p4: "1",
        },
        {
          p1: "测试",
          p2: "5",
          p3: "5",
          p4: "1",
        },
        {
          p1: "测试",
          p2: "5",
          p3: "5",
          p4: "1",
        },
        {
          p1: "测试",
          p2: "5",
          p3: "5",
          p4: "1",
        },
        {
          p1: "测试",
          p2: "5",
          p3: "5",
          p4: "1",
        },
        {
          p1: "测试",
          p2: "5",
          p3: "5",
          p4: "1",
        },
        {
          p1: "测试",
          p2: "5",
          p3: "5",
          p4: "1",
        },
      ],
    };
  },

  mounted() {},

  methods: {
    handleCurrentChange() {},
  },
};
</script>

<style scoped>
/* 解决gutter问题 */
::v-deep .el-table th.gutter {
  /* display: none !important; */
  width: 6px !important;
}
::v-deep .el-table colgroup col[name="gutter"] {
  /* display: none !important; */
  width: 6px !important;
}
::v-deep .el-table__body {
  width: 100% !important;
}

/* 表头样式 */
.contentbox >>> .el-table thead > tr > th {
  background: radial-gradient(#05274d, #0c4e7c);
  color: #fff;
  border-bottom: #4985ff38 1px solid;
}
.contentbox >>> .el-table__header {
  min-width: unset;
}

/* 高亮当前行 */
::v-deep .el-table__body tr.current-row > td {
  background: #0f2c52 !important;
}
::v-deep .el-table__body tr.current-row .cell {
  color: #ffffff !important;
}

/* 行样式 */
.contentbox >>> .el-table__body > tbody > tr > td {
  background: radial-gradient(#05274d, #0c4e7c);
  color: #fff;
  border-bottom: #4985ff38 1px solid;
}
.contentbox >>> .el-table__body tr.el-table__row:hover td {
  background: #0f2c52 !important;
}

/* 修改滚动条 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #041433;
  border-radius: 3px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 3px;
  background-color: #0f2c52;
}
</style>