16 使用Vue + 列表检索 + el-table + el-pagination 实现图书列表实战

<template>
  <div>
    <el-input
      v-model="searchKey"
      placeholder="请输入关键词"
      style="margin-bottom: 20px;"
    ></el-input>
    <el-table
      :data="filteredBooks"
      border
      stripe
      max-height="600"
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="100"
        sortable
      ></el-table-column>
      <el-table-column
        prop="title"
        label="书名"
        sortable
      ></el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        sortable
      ></el-table-column>
      <!-- 其他列 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="filteredBooks.length"
    ></el-pagination>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchKey: '',
      currentPage: 1,
      pageSize: 10,
      books: [
        // 填充你的图书数据
      ]
    };
  },
  computed: {
    filteredBooks() {
      const searchKey = this.searchKey && this.searchKey.toLowerCase();
      const filtered = this.books.filter(book => {
        return book.title.toLowerCase().includes(searchKey) ||
               book.author.toLowerCase().includes(searchKey);
      });
      // 分页逻辑
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return filtered.slice(start, end);
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

这个代码实例展示了如何在Vue中使用计算属性来实现对图书列表的搜索和分页功能。filteredBooks 是一个计算属性，它根据搜索关键词动态过滤图书列表，并且结合 el-pagination 组件实现分页功能。这是一个简洁而有效的实践，适合初学者学习和教学。