el-table\vxe-table深色背景Css样式

一、el-table

1、HTML

<div class="table">
  <el-table
    :data="tableData"
	:cell-class-name="tabCellClassName"
    :row-class-name="tabRowClassName"
    border>
    <!-- 序号 -->
    <el-table-column type="index" label="序号" width="50"></el-table-column>
    <!-- 表格内容 -->
    <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.key">
    </el-table-column>
  </el-table>
</table>

2、Script

<script>
export default {
  name: "table",
  components: {},
  props: {},
  data() {
    return {
      tableHead: [ 
        {
          id:1,
          key:"name",
          label:"姓名"
        },
        {
          id:2,
          key:"age",
          label:"年龄"
        },
        {
          id:3,
          key:"sex",
          label:"性别"
        },
      ],
      tableData: [
        {
          name: "张三",
          age: 18,
          sex: "男",
        },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // cell-class-name
    tabCellClassName({ column, columnIndex }) {
      column.index = columnIndex + 1;
    },

    // row-class-name
    tabRowClassName({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
  },
};
</script>

3、Css

.table{
  width:100%;
  height:100vh;
  background-color: rgba(#041a07, 0.7);

  /deep/ .el-table::before {
    background: #4caa81;
  }
  
  /deep/ .el-table::after {
    background: #4caa81;
  }
  
  /deep/ .el-table {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-color: #4caa81;
    display: flex;
    flex-direction: column;
  
    // 表头背景颜色设置
    & tr {
      background-color: transparent !important;
    }
  
    // th,td样式设置
    th,
    td {
      text-align: center;
      border-color: #4caa81;
      color: #fff;
      background-color: transparent !important;
    }
  
    .el-table__cell {
      padding: 5px 0px !important;
    }
  
    .cell {
      padding: 0px !important;
    }
  
    .el-table__body-wrapper {
      width: 100%;
      flex: 1;
      overflow-y: auto;
    }
  }
}

二、vxe-table

1、HTML

<template>
  <div class="VxeTable">
    <!-- 表格 -->
    <vxe-table
      ref="xTable"
      :loading="loading"
      show-overflow
      show-header-overflow
      height="90%"
      :row-config="{ isHover: true }"
      :data="tableData">
      >
      <vxe-column
        v-for="item in tableHead"
        :key="item.id"
        :field="item.key"
        :title="item.label">
      </vxe-column>
      <slot></slot>
    </vxe-table>
    
    <!-- 分页 -->
    <vxe-pager
      size="mini"
      :loading="loading"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :page-sizes="tablePage.pageSizes"
      :total="tablePage.totalResult"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'Total']"
      @page-change="handlePageChange">
    </vxe-pager>
  </div>
</template>

2、Script

<script>
export default {
  data() {
    return {
      loading: false,
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        pageSizes: [5, 10, 15, 20],
        totalResult: 0,
      },
      tableHead: [ 
        {
          id:1,
          key:"name",
          label:"姓名"
        },
        {
          id:2,
          key:"age",
          label:"年龄"
        },
        {
          id:3,
          key:"sex",
          label:"性别"
        },
      ],
      tableData: [
        {
          name: "张三",
          age: 18,
          sex: "男",
        },
      ],
    };
  },
  props: {},
  methods: {
    // 页码改变
    handlePageChange({ type, pageSize, currentPage }) {
      console.log(`页码改变，类型：${type}, 页码：${currentPage}, 每页条数：${pageSize}`)
    },
  },
  created() {},
  mounted() {},
};
</script>

3、Css

<style lang="less" scoped>
.VxeTable {
  width: 100%;
  height: 100%;

  // 表格
  /deep/ .vxe-table {
    width: 100%;
    box-sizing: border-box;

    .vxe-table--border-line {
      border-color: #026133;
    }

    // 单元格样式
    .vxe-body--column,
    .vxe-footer--column,
    .vxe-header--column {
      background-image: none !important;
      border-bottom: 1px solid #026133 !important;
      color: #fff !important;
    }

    // 单元格文本居中
    .vxe-cell {
      display: flex;
      justify-content: center;
    }

    // 表头背景颜色
    .vxe-table--header-wrapper {
      background-color: #065730 !important;

      // 表头底部线条
      .vxe-table--header-border-line {
        border-bottom: none;
      }
    }

    // 表格内容、底部背景颜色
    .vxe-table--body-wrapper table,
    .vxe-table--footer-wrapper table {
      background-color: transparent !important;
    }

    .vxe-header--gutter {
      background-image: linear-gradient(#065730, #065730) !important;
    }

    // 行hover样式
    .vxe-body--row.row--hover {
      background: #06322d !important;
    }
  }

  // 分页
  /deep/ .vxe-pager {
    background-color: transparent !important;
    width: 100%;
    height: 10%;
    text-align: center;
    color: #fff !important;

    // 自定义样式
    .vxe-pager--prev-btn,
    .vxe-pager--num-btn,
    .vxe-pager--next-btn,
    .vxe-input--inner {
      background-color: transparent !important;
      border: 1px solid #026133;
      color: #fff !important;
    }

    // vxe-select获取焦点时边框颜色
    .vxe-input:not(.is--disabled).is--active .vxe-input--inner {
      border: 1px solid #026133;
    }

    // 上一页，下一页禁用时样式
    .vxe-pager--prev-btn.is--disabled,
    .vxe-pager--next-btn.is--disabled {
      background-color: #69706c !important;
      border-color: #69706c !important;
      color: #999 !important;
    }

    // 上一页、下一页、页码选中时样式
    .vxe-pager--prev-btn:not(.is--disabled):focus,
    .vxe-pager--num-btn:not(.is--disabled):focus,
    .vxe-pager--next-btn:not(.is--disabled):focus {
      box-shadow: none;
    }

    // 当前页码选中时样式
    .vxe-pager--num-btn.is--active {
      background-color: #026133 !important;
    }
  }
}
</style>