eep_page/src/views/home/index.vue

<template>
  <div class="home">
    <div></div>
    <div></div>
    <div></div>
    <div>
      <router-link to="/courseware/create">打开新页面</router-link>
    </div>

    <el-table :data="data" height="100%">
      <el-table-column prop="name" label="教材名称" width="180" />
    </el-table>
    <el-pagination
      background
      :current-page="cur_page"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="page_capacity"
      layout="total, prev, pager, next, sizes, jumper"
      :total="total"
      @prev-click="changePage"
      @next-click="changePage"
      @current-change="changePage"
      @size-change="changePageSize"
    />
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      data: undefined,
      cur_page: 1,
      page_capacity: 10,
      total: 0,
    };
  },
  methods: {
    changePage(number) {
      this.cur_page = number;
    },
    changePageSize(size) {
      this.page_capacity = size;
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  min-height: calc(100% - 16px);
  padding: 24px;
  margin: 0 24px 16px;
  background-color: #fff;
  border-radius: 4px;
}
</style>