element ui 分页器如何绑定数据

在Element UI中，可以使用el-pagination组件实现分页功能，并且可以通过绑定total属性来动态更新分页器的总页数。以下是一个简单的示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <el-pagination
      v-if="total > 0"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      total: 0,
      pageSize: 10,
      currentPage: 1
    };
  },
  methods: {
    fetchData() {
      // 发送请求获取数据，并更新items和total属性
      // ...
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchData();
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

在这个示例中，el-pagination组件的total属性绑定到了Vue实例中的total属性，如果total属性的值发生变化，分页器的总页数会相应地更新。currentPage属性表示当前页码，pageSize属性表示每页显示的数据条数。handleCurrentChange方法监听当前页码的变化，当页码发生变化时，更新currentPage属性，并重新获取数据。在模板中，使用v-for指令渲染数据，并且当total大于0时，显示分页器。

需要注意的是，total属性的值必须是一个大于等于0的整数，pageSize属性的值必须是一个大于0的整数，currentPage属性的值必须是一个大于等于1且小于等于total的整数。