怎么使用elementUI组件实现表格的分页及搜索功能

发布时间：2023-03-28 15:44:45 作者：iii
来源：亿速云阅读：347

怎么使用ElementUI组件实现表格的分页及搜索功能

引言

在现代Web应用中，表格是展示数据的重要组件之一。随着数据量的增加，如何高效地展示和管理数据成为了一个关键问题。ElementUI，作为一款基于Vue.js的UI组件库，提供了丰富的组件来帮助我们快速构建功能强大的表格。本文将详细介绍如何使用ElementUI的el-table组件实现表格的分页及搜索功能。

1. 环境准备

在开始之前，确保你已经安装了Vue.js和ElementUI。如果还没有安装，可以通过以下命令进行安装：

# 安装Vue.js
npm install vue

# 安装ElementUI
npm install element-ui

安装完成后，在项目的入口文件（通常是main.js）中引入ElementUI：

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

Vue.use(ElementUI);

2. 基本表格展示

首先，我们创建一个基本的表格来展示数据。假设我们有一个包含用户信息的数组：

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25, address: '上海市普陀区金沙江路 1518 弄' },
        { id: 2, name: '李四', age: 30, address: '上海市普陀区金沙江路 1517 弄' },
        { id: 3, name: '王五', age: 28, address: '上海市普陀区金沙江路 1519 弄' },
        // 更多数据...
      ]
    };
  }
};

在模板中使用el-table组件来展示这些数据：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

此时，页面将展示一个包含用户信息的表格。

3. 实现分页功能

当数据量较大时，分页功能是必不可少的。ElementUI提供了el-pagination组件来实现分页功能。

3.1 添加分页组件

首先，在表格下方添加el-pagination组件：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

3.2 处理分页逻辑

在data中定义分页相关的变量：

export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0 // 总条数
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模拟从后端获取数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = this.allData.slice(start, end);
      this.total = this.allData.length;
    }
  },
  created() {
    this.allData = [
      { id: 1, name: '张三', age: 25, address: '上海市普陀区金沙江路 1518 弄' },
      { id: 2, name: '李四', age: 30, address: '上海市普陀区金沙江路 1517 弄' },
      { id: 3, name: '王五', age: 28, address: '上海市普陀区金沙江路 1519 弄' },
      // 更多数据...
    ];
    this.fetchData();
  }
};

3.3 解释

currentPage：当前页码。
pageSize：每页显示的条数。
total：数据总条数。
handleSizeChange：当每页显示条数改变时触发。
handleCurrentChange：当页码改变时触发。
fetchData：模拟从后端获取数据的方法。

4. 实现搜索功能

搜索功能可以帮助用户快速找到所需的数据。我们可以通过添加一个搜索框来实现这一功能。

4.1 添加搜索框

在表格上方添加一个搜索框：

<template>
  <div>
    <el-input
      v-model="searchQuery"
      placeholder="请输入搜索内容"
      style="width: 200px; margin-bottom: 20px;">
    </el-input>

    <el-table :data="filteredTableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="filteredTotal">
    </el-pagination>
  </div>
</template>

4.2 处理搜索逻辑

在data中定义搜索相关的变量：

export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0, // 总条数
      searchQuery: '', // 搜索关键词
      allData: [] // 所有数据
    };
  },
  computed: {
    filteredTableData() {
      return this.allData.filter(data => {
        return data.name.includes(this.searchQuery);
      }).slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    },
    filteredTotal() {
      return this.allData.filter(data => {
        return data.name.includes(this.searchQuery);
      }).length;
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  created() {
    this.allData = [
      { id: 1, name: '张三', age: 25, address: '上海市普陀区金沙江路 1518 弄' },
      { id: 2, name: '李四', age: 30, address: '上海市普陀区金沙江路 1517 弄' },
      { id: 3, name: '王五', age: 28, address: '上海市普陀区金沙江路 1519 弄' },
      // 更多数据...
    ];
  }
};

4.3 解释

searchQuery：搜索关键词。
filteredTableData：根据搜索关键词过滤后的表格数据。
filteredTotal：过滤后的数据总条数。

5. 结合分页和搜索功能

在实际应用中，分页和搜索功能通常是结合在一起的。我们可以通过以下方式实现这一功能：

5.1 修改`fetchData`方法

在fetchData方法中，根据搜索关键词过滤数据：

fetchData() {
  const filteredData = this.allData.filter(data => {
    return data.name.includes(this.searchQuery);
  });
  const start = (this.currentPage - 1) * this.pageSize;
  const end = start + this.pageSize;
  this.tableData = filteredData.slice(start, end);
  this.total = filteredData.length;
}

5.2 监听搜索关键词的变化

在watch中监听searchQuery的变化，并调用fetchData方法：

watch: {
  searchQuery() {
    this.currentPage = 1;
    this.fetchData();
  }
}

5.3 完整代码

export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示条数
      total: 0, // 总条数
      searchQuery: '', // 搜索关键词
      allData: [] // 所有数据
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      const filteredData = this.allData.filter(data => {
        return data.name.includes(this.searchQuery);
      });
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = filteredData.slice(start, end);
      this.total = filteredData.length;
    }
  },
  watch: {
    searchQuery() {
      this.currentPage = 1;
      this.fetchData();
    }
  },
  created() {
    this.allData = [
      { id: 1, name: '张三', age: 25, address: '上海市普陀区金沙江路 1518 弄' },
      { id: 2, name: '李四', age: 30, address: '上海市普陀区金沙江路 1517 弄' },
      { id: 3, name: '王五', age: 28, address: '上海市普陀区金沙江路 1519 弄' },
      // 更多数据...
    ];
    this.fetchData();
  }
};

6. 总结

通过以上步骤，我们成功地使用ElementUI的el-table和el-pagination组件实现了表格的分页及搜索功能。在实际项目中，你可以根据需求进一步优化和扩展这些功能，例如添加排序、筛选等功能，以满足不同的业务需求。

希望本文对你有所帮助，祝你在使用ElementUI开发Vue.js应用时能够得心应手！