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: #00000032"
      height="calc(100% - 60px)"
    >
      <el-table-column prop="serviceName" label="服务名称" width="300" />
      <el-table-column prop="serviceType" label="类别" width="300" />
      <el-table-column prop="callCount" label="调用次数" width="480" />
      <el-table-column prop="successRate" label="成功率" width="180" />
      <el-table-column prop="avgResponseTime" label="平均响应" />
    </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,
    };
  },
  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;
}
.table_title {
  font-size: 16px;
}
.table_more {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 14px;
  color: #1890ff;
}
.table_pagination {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
</style>