element-plus(vue3)和element(vue2)前端静态表格分页

<template>
  <div>
    <el-table :data="tableList_" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
    <el-pagination
      layout="total,sizes,prev, pager, next"
      :total="tableData.length"
      :page-size="pageSize"
      @current-change="currentChange"
      @size-change="handleSizeChange"
      :page-sizes="[1, 3, 6, 10]"
      :current-page="currentPage"
    ></el-pagination>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const pageSize = ref(10)
const currentPage = ref(1)
//实现方法：
const currentChange = (e) => {
  currentPage.value = e
}
const handleSizeChange = (val) => {
  console.log(val)
  pageSize.value = val
}

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const tableList_ = computed(() => {
  let result = tableData.value.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  )
  return result
})
</script>

element（vue2）

<template>
  <div class="dashboard">
    <div class="top-layout">我是头</div>
    <div class="content">
      <el-table :data="tableList_" border height="90%">
        <el-table-column prop="name" label="样式名称" width="180">
        </el-table-column>
        <el-table-column prop="operate" label="操作" width="180">
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom-layout">
      <div class="bottom-page">
        <el-pagination
          background
          layout="sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          :current-page.sync="currentPage"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "FirstMap",
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
    };
  },
  computed: {
    tableList_() {
      let result = this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
      return result;
    },
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    async test() {
      axios({
        method: "get",
        url: "http://192.168.10.115:38080/geoserver/rest/styles",
        auth: {
          username: "admin",
          password: "geoserver",
        },
      }).then((result) => {
        console.log(result);
        this.tableData = result.data.styles.style;
      });
    },

    // const res = await axios.get(
    //   "http://192.168.10.115:38080/geoserver/rest/styles"
    // );
    // console.log("xx");
    // },
  },

  // 元素挂在后执行初始化操作
  mounted() {
    this.test();
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  height: 100%;
}
.top-layout {
  // background: pink;
  height: 100px;
}

.content {
  // background: papayawhip;
  height: calc(100% - 200px);
  width: 100%;
}
.bottom-layout {
  height: 100px;
  .bottom-page {
    margin-right: 50px;
    display: flex;
    justify-content: end;
  }
}
</style>

自己封装的表格方法

const changePageSize = (val) => {
  pageSize.value = val._limit
  currentPage.value = parseInt(val._offset / val._limit) + 1
}