Element-UI 项目中 Pagination 分页如何使用

先看效果：

应用场景：

一般分页功能多用于一些数据量较大的信息展示页面，通过分页可以设置每页的显示数量。多用于和 el-table 结合使用！

属性

参数	说明	类型	可选值	默认值
small	是否使用小型分页样式	boolean	—	false
background	是否为分页按钮添加背景色	boolean	—	false
page-size	每页显示条目个数，支持 .sync 修饰符	number	—	10
total	总条目数	number	—	—
page-count	总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性	Number	—	—
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的奇数	7
current-page	当前页数，支持 .sync 修饰符	number	—	1
layout	组件布局，子组件名用逗号分隔	String	`sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot`	'prev, pager, next, jumper, ->, total'
page-sizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 30, 40, 50, 100]
popper-class	每页显示个数选择器的下拉框类名	string	—	—
prev-text	替代图标显示的上一页文字	string	—	—
next-text	替代图标显示的下一页文字	string	—	—
disabled	是否禁用	boolean	—	false
hide-on-single-page	只有一页时是否隐藏	boolean	—	-

事件

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

Slot

name	说明
—	自定义内容，需要在 `layout` 中列出 `slot`

代码：

      <!-- 表格 -->
      <div class="datas">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column>
          <el-table-column prop="sysPersonName" label="姓名"></el-table-column>
          <el-table-column prop="sysPersonSex" label="性别"></el-table-column>
          <el-table-column prop="sysPersonPhone" label="手机号"></el-table-column>
          <el-table-column prop="sysPersonId" label="编号"></el-table-column>
          <el-table-column prop="sysIfAttendance" label="是否考勤"></el-table-column>
          <el-table-column prop="organizationInfo.sysOrganizationName" label="所属组织"></el-table-column>
          <el-table-column prop="sysRemark" label="备注"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >消息</el-button
              >
              <el-button @click="godetails(scope.row)" type="text" size="small"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="block">
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="person.page" 
        :page-sizes="[10]"
        :page-size = 10
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>

<script>
export default {
  data() {
    return {
      tableData: [],
      // 分页
      totalCount: 0, //总条数，总共有多少条数据
      radio: "1",
      // 人员列表数据
      person: {
        limit: 0,
        options: {
        },
        page: 0,
      },
      value: "",
      sendMessagePopups: false,
      form: {
        name: "",
        messageContent: "",
      },
      pages: 0,
      multipleSelection: [],
      messageFrom:{
        messageName: '',
        messageContent:'',
      },
      messageName: ''
    };
  },
  created() {
    this.personTableList();
  },
  methods: {
    // 人员列表
    personTableList() {
      this.person.limit = 10
      this.$http.put("/api/list/person", this.person).then((res) => {
        if (res.data.status === 200) {
          console.log(res.data.data)
          this.pages = res.data.data
          this.tableData = res.data.data.data;
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].sysPersonSex == 1) {
              this.tableData[i].sysPersonSex = "男";
            } else {
              this.tableData[i].sysPersonSex = "女";
            }
            if (this.tableData[i].sysIfAttendance == 1) {
              this.tableData[i].sysIfAttendance = "是";
            } else {
              this.tableData[i].sysIfAttendance = "否";
            }
          }
          this.totalCount = res.data.data.count;
          console.log(this.tableData);
        } else {
          this.$message.error(res.data.message);
          return;
        }
      });
    },
    // 分页
    handleCurrentChange(newPage) {
      this.person.page = newPage
      this.personTableList()
    },
    handleSizeChange(val) {
      this.person.limit = val
      this.personTableList()
    },
    // 表格数据索引累加
    indexMethod(index){
      return(this.pages.page-1) * 10 + index + 1
    },
    
 
  },
 
  
};
</script>