Vue + 列表检索 + el-table + el-pagination实战指南

使用 Vue.js、Element UI 构建响应式的图书列表

构建 Vue.js 项目

首先，使用 Vue CLI 创建一个 Vue.js 项目：

vue create vue-book-list

安装 Element UI

安装 Element UI 组件库：

npm install element-ui -S

并在 main.js 文件中导入和注册 Element UI：

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

创建图书列表组件

创建一个 BookList.vue 文件，作为图书列表组件：

<template>
  <el-table :data="books" stripe>
    <el-table-column prop="id" label="图书编号"></el-table-column>
    <el-table-column prop="title" label="图书名称"></el-table-column>
    <el-table-column prop="author" label="作者"></el-table-column>
    <el-table-column prop="price" label="价格"></el-table-column>
  </el-table>
  <el-pagination :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentPageChange"></el-pagination>
</template>

<script>
export default {
  data() {
    return {
      books: [],
      currentPage: 1,
      pageSize: 10
    }
  },
  methods: {
    handleCurrentPageChange(val) {
      this.currentPage = val;
      // 这里需要根据当前页码和每页显示数量来获取数据
    }
  },
  mounted() {
    // 这里需要从服务器获取图书数据并赋值给this.books
  }
}
</script>

在 App.vue 中使用图书列表组件

在 App.vue 文件中，注册并渲染图书列表组件：

<template>
  <div id="app">
    <book-list></book-list>
  </div>
</template>

<script>
import BookList from './components/BookList.vue';

export default {
  components: {
    BookList
  }
}
</script>

运行项目

运行以下命令运行项目：

npm run serve

访问 http://localhost:8080 查看图书列表页面。

注意要点

• 数据绑定： 利用 Vue.js 的响应式特性，轻松将数据与组件绑定。
• 组件化： 将图书列表封装成一个独立组件，便于复用和维护。
• 分页： 使用 el-pagination 组件实现分页，控制每页显示数量和当前页码。
• 列表检索： 添加搜索功能，允许用户通过关键词检索图书。
• UI 交互： 使用 Element UI 组件美化 UI 并增强交互。

结论

本文详细介绍了如何使用 Vue.js、Element UI 构建图书列表，包括列表检索、数据表格、分页等功能。掌握这些技术，可以创建交互式且动态的前端应用程序。

常见问题解答

1. 如何从服务器获取图书数据？
   在 mounted() 生命周期钩子中，使用异步请求从服务器获取数据并将其赋值给 this.books。
2. 如何实现列表检索？
   在 BookList.vue 组件中添加一个输入框，并监听其 input 事件，根据输入内容过滤 this.books 数据。
3. 如何自定义分页大小？
   在 BookList.vue 组件中，设置 pageSize 属性为所需的每页显示数量。
4. 如何美化 UI？
   使用 Element UI 提供的各种组件，如按钮、图标和进度条，自定义图书列表的视觉效果。
5. 如何部署项目？
   使用 npm run build 构建项目，然后将其部署到 Web 服务器，如 Nginx 或 Apache。