vue项目 使用element-ui分页效果

 

图一

我写的是这种效果。

之前加上分页老实出现这种现象

图二

只要数据一多就溢出屏幕的也没有分页的效果

代码如下

room.vue

 <el-table :data="tableData" size="mini" style="width: 99%;" >
      <el-table-column align="center" fixed label="编号" width="50">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed label="姓名" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="科室名称" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.department }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="年龄" width="120">
        <template slot-scope="scope">
          {{ scope.row.age }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="科室" width="180">
        <template slot-scope="scope">
          {{ scope.row.keshi }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="家庭地址" width="180">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" 
      :current-page="queryInfo.pageNo"
      :page-size="queryInfo.pageSize"
      layout=" prev, pager, next, jumper, ->,total"
      :total="total"
      style="text-align: center">
      <!-- total 总条数                   pageno是页码 pagesize是当前页面条数 显示十条还是20条
        current-page 当前页
        page-sizes 每页显示多少条
        page-size 一页显示多少条
        size-change 指的是一页展示多少条发生改变的钩子函数
        current-change 当前页码发生改变的时候触发 -->
    </el-pagination>

 room.vue 中的 data      ，其中的queryInfo和里面的数据需要我们自己定义 的。    

   return {
      dialogVisible: false,
      // 获取用户列表数据
      queryInfo:{
        // 当前页数
        pageNo:1,  //
        // 当前页面显示多少条数据
        pageSize:9
      },
      // 表格数据
      tableData: [],
      // 表格数据的总数据量
      total: 0,
       // 当前页码
       pageNo: 1,
      // 是否打开抽屉
      drawer: false,
      direction: 'rtl',
      // 抽屉是否做添加
      isAdd: true,
      // 表单数据
      ruleForm: {
        username: "",
        password: '',
        fullname: '',
        roleid: '',
        imgUrl: '',
        introduce: '',
        position: '',
        id:'',
        department:"",
        age:'',
        keshi:'',
        address:'',
      },

 

 

 接下来就是分页的方法了：

 以上的浏览器里面会出现的效果就是上图二的效果。只要在表格上面的代码里面的:data="tableData"里面加.slice((queryInfo.pageNo -1) *queryInfo.pageSize, queryInfo.pageNo *queryInfo.pageSize)就可以了

room.vue

<template>
 <!-- 表格区 -->
    <el-table :data="tableData.slice((queryInfo.pageNo -1) *queryInfo.pageSize, queryInfo.pageNo *queryInfo.pageSize)" size="mini" style="width: 99%;" >
      <el-table-column align="center" fixed label="编号" width="50">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed label="姓名" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="科室名称" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.department }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="年龄" width="120">
        <template slot-scope="scope">
          {{ scope.row.age }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="科室" width="180">
        <template slot-scope="scope">
          {{ scope.row.keshi }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="家庭地址" width="180">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" 
      :current-page="queryInfo.pageNo"
      :page-size="queryInfo.pageSize"
      layout=" prev, pager, next, jumper, ->,total"
      :total="total"
      style="text-align: center">
      <!-- total 总条数                   pageno是页码 pagesize是当前页面条数 显示十条还是20条
        current-page 当前页
        page-sizes 每页显示多少条
        page-size 一页显示多少条
        size-change 指的是一页展示多少条发生改变的钩子函数
        current-change 当前页码发生改变的时候触发 -->
    </el-pagination>
</template>
<script>

export default {
  // 数据
  data() {
 return {
      dialogVisible: false,
      // 获取用户列表数据
      queryInfo:{
        // 当前页数
        pageNo:1,  //
        // 当前页面显示多少条数据
        pageSize:9
      },
      // 表格数据
      tableData: [],
      // 表格数据的总数据量
      total: 0,
       // 当前页码
       pageNo: 1,
      // 是否打开抽屉
      drawer: false,
      direction: 'rtl',
      // 抽屉是否做添加
      isAdd: true,
      // 表单数据
      ruleForm: {
        username: "",
        password: '',
        fullname: '',
        roleid: '',
        imgUrl: '',
        introduce: '',
        position: '',
        id:'',
        department:"",
        age:'',
        keshi:'',
        address:'',
      },}}
 created() {
    //调用获取表格数据的方法
    this.getTableData();
    // 
    this.getUserList();
  },
  // 方法
  methods: {
   
     // 分页方法
    // 监听pageSize改变事件 ,页码
    handleSizeChange(val) {
      // console.log(`每页 ${newSzie} 条`);
      // console.log('pagesize',newSzie);
      this.queryInfo.pageSize = val
      
      this.getUserList ()
    },
    // 监听页码值改变事件
    handleCurrentChange(val) {
      // console.log(`当前页: ${newPage}`);
      this.queryInfo.pageNo = val
      this.getUserList()
    },
    // 获取分页列表法
    async getUserList(){   // {params:this.queryInfo}
      let res =await this.$get('http://101.132.175.194:8081/user/list?pageNo=1&pageSize=10')
      console.log("分页",res);
      this.total = res.data.total
    },
    //获取表格数据的方法
    async getTableData() {
      let res = await this.$get('http://101.132.175.194:8081/user/all')     
      console.log('此时表格数据', res);
      this.tableData = res.data
      console.log(11, this.tableData);
    },
</script>