qp_onemap_ui/src/components/yxgl/table.vue

<template>
  <div class="table_box">
    <div class="table_title">{{ title }}</div>
    <!-- <div class="table_more">
      <el-button type="primary" link> 更多 </el-button>
    </div> -->
    <el-table
      :data="tableData"
      style="width: 100%; background-color: rgba(255, 255, 255, 0.1)"
      height="320px"
      :header-cell-style="headerCellStyle"
      :row-style="rowStyle"
      :cell-style="cellStyle"
      stripe
      border
    >
      <!-- 添加序号列 -->
      <el-table-column type="index" label="" width="100" align="center" />
      <el-table-column prop="c_path_comment" label="服务名称" />
      <el-table-column prop="service_type" label="类别" width="600" />
      <el-table-column prop="c_count" label="调用次数" width="280" />
    </el-table>
    <!-- <div class="table_pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 300, 400]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->
  </div>
</template>

<script>
export default {
  name: "Table",
  props: {
    title: {
      type: String,
      default: "图表标题",
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pageSize: 100,
      currentPage: 1,
    };
  },
  computed: {
    headerCellStyle() {
      return {
        backgroundColor: "rgba(24, 144, 255, 0.25)",
        color: "#0071e3",
        fontWeight: "bold",
        borderBottom: "2px solid rgba(24, 144, 255, 0.3)",
        padding: "12px 8px",
      };
    },
    rowStyle() {
      return {
        // 调整行背景色为更浅的黑色，增加透明度
        backgroundColor: "rgba(0, 0, 0, 0.05)",
        borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
        transition: "all 0.3s ease",
      };
    },
    cellStyle() {
      return {
        color: "#e0e0e0",
        padding: "12px 8px",
        borderRight: "1px solid rgba(255, 255, 255, 0.05)",
      };
    },
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style lang="less" scoped>
.table_box {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  // background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.table_title {
  font-size: 18px;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 8px;
  // border-bottom: 2px solid rgba(24, 144, 255, 0.2);
}

.table_more {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 14px;
  color: #1890ff;

  .el-button {
    color: #0071e3;

    &:hover {
      color: #0056b3;
    }
  }
}

.table_pagination {
  position: absolute;
  bottom: 20px;
  right: 20px;

  .el-pagination {
    color: #e0e0e0;

    .btn-prev,
    .btn-next,
    .el-pager li {
      background-color: rgba(0, 0, 0, 0.3);
      color: #e0e0e0;
      border: 1px solid rgba(255, 255, 255, 0.1);

      &:hover {
        background-color: rgba(24, 144, 255, 0.2);
        color: #0071e3;
        border-color: rgba(24, 144, 255, 0.3);
      }
    }

    .el-pager li.active {
      background-color: rgba(24, 144, 255, 0.3);
      color: #0071e3;
      border-color: rgba(24, 144, 255, 0.5);
    }
  }
}

// 美化表格行悬停效果
:deep(.el-table__body tr:hover > td) {
  background-color: rgba(24, 144, 255, 0.1) !important;
}

// 美化表格边框
:deep(.el-table__inner-wrapper) {
  border-radius: 6px;
  overflow: hidden;
}

:deep(.el-table__cell) {
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

:deep(.el-table__row) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

// 调整奇偶行背景色，使其更明亮
:deep(.el-table--striped .el-table__body tr.el-table__row--striped) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

// 调整表格主体背景色
:deep(.el-table__body) {
  background-color: rgba(0, 0, 0, 0.05);
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
  background-color: rgba(255, 255, 255, 0.02);
}
</style>