使用element ui制作一个可以展示数据并且能够分页的模版页面

好的，下面是一个使用Element UI制作的可以展示数据并且能够分页的模板页面的示例代码：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            name: '张三',
            age: 18,
            address: '北京市朝阳区'
          },
          {
            name: '李四',
            age: 25,
            address: '上海市浦东新区'
          },
          {
            name: '王五',
            age: 30,
            address: '广州市天河区'
          },
          {
            name: '赵六',
            age: 35,
            address: '深圳市福田区'
          },
          {
            name: '钱七',
            age: 40,
            address: '重庆市渝北区'
          }
        ],
        currentPage: 1,
        pageSize: 10,
        total: 5
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      }
    }
  }
</script>

这个示例代码中使用了`<el-table>`和`<el-pagination>`两个Element UI组件，分别用于展示表格数据和分页控制。其中，`<el-table>`的`:data`属性绑定了表格数据，`:prop`属性指定了表格列对应的数据字段。`<el-pagination>`的各个属性用于配置分页控制器的样式和功能，比如`:current-page`用于绑定当前页码，`:page-size`用于绑定每页显示条数，`:total`用于绑定总数据量。

希望这个示例能够对您有所帮助！