Vue.js 中使用 Element UI 实现异步加载分页列表

Vue.js 中使用 Element UI 实现异步加载分页列表

在前端开发中，我们常常需要展示大量数据，并提供分页浏览的功能。本篇博客将介绍如何使用 Vue.js 和 Element UI 组件库创建一个简单的异步加载分页列表。

技术栈

• Vue.js
• Element UI
• JavaScript

组件结构

我们将创建一个包含表格和分页组件的 Vue 单文件组件。以下是组件的基本结构：

创建过程

1. 引入 Element UI： 在项目中引入 Element UI 组件库。可以使用 npm 或 yarn 安装 Element UI。

   npm install 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. 创建组件： 创建一个 Vue 单文件组件，定义表格和分页的结构。

3. 异步加载数据： 使用 created 钩子模拟异步加载数据。在实际项目中，将从后端 API 获取数据。

4. 分页功能： 使用 Element UI 提供的分页组件实现分页功能。监听分页组件的事件，更新当前页码和每页条数。

main.js :

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

    Vue.config.productionTip = false

    Vue.use(ElementUI);

    new Vue({
      render: h => h(App),
      components: {
        ListDisplay,
      },
      template: '',
    }).$mount('#app')

App.vue:

当然列表组件也可以拆开来展示

MyTable：

MyPagination：

实现效果：