vue + element-ui的分页问题实现

下面是“vue + element-ui的分页问题实现”的完整攻略，包含以下几个部分：

1. 安装element-ui和配置Vue组件
2. Element-ui分页组件的使用
3. 分页数据处理及传参方式说明

1. 安装element-ui和配置Vue组件

1.1 安装element-ui

首先需要在你的项目中安装 element-ui，使用如下命令进行安装：

npm install element-ui -S

1.2 引入element-ui组件

在 main.js 文件中，引入 element-ui 并注册组件：

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. Element-ui分页组件的使用

Element-ui提供了分页组件 el-pagination ，使用 el-pagination 组件需要传递3个参数：当前页码、每页显示数量、数据总量。示例如下：

<template>
  <div>
    <el-pagination
      @current-change="paginationChange"  //监听当前页码改变
      :current-page="currentPage" //当前页码
      :page-size="pageSize" //每页显示数量
      :total="dataTotal"> //数据总量
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
        currentPage: 1, // 当前分页的页码
        pageSize:10, // 每页显示数量
        dataTotal: 100, // 数据总量
    }
  },
  methods: {
    paginationChange(page) { // 监听分页组件当前页码改变的事件
        console.log('当前页码', page)
    }
  }
}
</script>

3. 分页数据处理及传参方式说明

在实际开发过程中，通常需要通过接口获取分页数据并展示在页面中。可以使用 axios 库发起请求获取数据。示例如下：

<template>
  <div>
    // 当前页显示的数据列表
    <ul>
      <li v-for="(item, index) in dataList" :key="index">{{ item }}</li>
    </ul>
    // 分页组件
    <el-pagination
      @current-change="paginationChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="dataTotal">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
        currentPage: 1,
        pageSize: 10,
        dataTotal: 0,
        dataList: [], // 当前页显示的数据列表
    }
  },
  mounted () {
    this.getData();
  },

  methods: {
        // 获取数据
        getData () {
            axios.get('your/api/url', {
                params: {
                    pageIndex: this.currentPage,
                    pageSize: this.pageSize,
                    // other params
                }
            }).then(res => {
                this.dataList = res.data.dataList;
                this.dataTotal = res.data.total;
            })
        },

        // 分页组件页码改变时触发的方法
        paginationChange(page) {
            this.currentPage = page;
            this.getData();
        }
  }
}
</script>

以上代码中，使用了axios库发起请求获取数据，同时在 current-change 监听事件中更新当前页码和调用获取数据的方法，实现了基本的分页功能。

示例2：使用element-plus分页组件来实现分页功能。

Element-ui现在的维护已经很少，所以现在用element-plus库来来实现分页功能。下面是element-plus分页组件的示例代码：

<template>
  <div>
    <el-table :data="dataList" stripe>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
    <el-pagination
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :total="dataTotal"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="paginationChange"
      style="margin-top:10px;">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios';
import {ref, onMounted, watch} from 'vue';
import {ElMessage} from 'element-plus';

export default {
  setup () {
    const currentPage = ref(1);
    const pageSize = ref(10);
    const dataList = ref([]);
    const dataTotal = ref(0);

    const getData = () => {
      axios.get('your/api/url', {
        params: {
          pageIndex: currentPage.value,
          pageSize: pageSize.value,
          // other params ...
        }
      })
      .then(res => { 
        dataList.value = res.data.dataList;
        dataTotal.value = res.data.total;
      })
      .catch(err => {
        ElMessage.error('获取数据失败！');
      });
    }

    const paginationChange = (currentPageIndex) => {
      currentPage.value = currentPageIndex;
      getData();
    }

    onMounted(() => {
      getData();
    });

    watch(currentPage, () => {
      getData();
    });

    return {
      currentPage,
      pageSize,
      dataList,
      dataTotal,
      getData,
      paginationChange,
    }
  }
}
</script>

总结：以上就是vue + element-ui分页问题的实现攻略，其中包含了使用element-ui和element-plus两种方式实现分页的示例。如果在实现分页功能时，还遇到其它问题，可以在开发过程中随时查阅element-ui和element-plus的官方文档。