vue基于el-table怎么实现多页多选及翻页回显

发布时间：2022-12-13 09:10:12 作者：iii
来源：亿速云阅读：229

Vue基于el-table怎么实现多页多选及翻页回显

引言

在Vue.js开发中，Element UI是一个非常流行的UI框架，其中的el-table组件常用于展示表格数据。在实际项目中，我们经常会遇到需要在表格中进行多选操作，并且支持跨页选择的需求。此外，当用户翻页时，之前选中的数据需要能够正确回显。本文将详细介绍如何基于el-table实现多页多选及翻页回显功能。

1. 基本需求分析

在实现多页多选及翻页回显功能之前，我们需要明确以下几个基本需求：

多选功能：用户可以在表格中选择多行数据。
跨页选择：用户可以在不同页面中选择数据，并且之前选择的数据不会丢失。
翻页回显：当用户翻页时，之前选择的数据需要在表格中正确回显。
数据存储：需要有一个地方存储用户选择的数据，以便在翻页时能够正确回显。

2. 实现思路

为了实现上述需求，我们可以采用以下思路：

使用el-table的多选功能：el-table组件本身支持多选功能，我们可以通过设置type="selection"来启用多选列。
跨页选择：为了实现跨页选择，我们需要在用户选择数据时，将选择的数据存储在一个全局变量中。这样，当用户翻页时，我们可以根据这个全局变量来回显之前选择的数据。
翻页回显：在每次翻页时，我们需要检查当前页的数据是否在全局变量中，如果是，则将其标记为已选中。
数据存储：我们可以使用Vue的data属性来存储用户选择的数据。

3. 实现步骤

3.1 初始化项目

首先，我们需要创建一个Vue项目，并引入Element UI库。

vue create vue-el-table-multi-select
cd vue-el-table-multi-select
vue add element

3.2 创建表格组件

接下来，我们创建一个表格组件MultiSelectTable.vue，并在其中使用el-table组件。

<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectedRows: [], // 存储用户选择的数据
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟从后端获取数据
      const data = [];
      for (let i = 1; i <= 100; i++) {
        data.push({
          id: i,
          date: `2023-10-${i < 10 ? '0' + i : i}`,
          name: `用户${i}`,
          address: `地址${i}`,
        });
      }
      this.total = data.length;
      this.tableData = data.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    handleSelectionChange(rows) {
      this.selectedRows = rows;
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
      this.$nextTick(() => {
        this.restoreSelection();
      });
    },
    restoreSelection() {
      this.tableData.forEach((row) => {
        if (this.selectedRows.some((selectedRow) => selectedRow.id === row.id)) {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        }
      });
    },
  },
};
</script>

3.3 代码解析

3.3.1 表格数据初始化

在fetchData方法中，我们模拟从后端获取数据，并根据当前页码和每页大小来截取数据。total属性表示数据的总条数，用于分页组件的显示。

3.3.2 多选功能

el-table组件的@selection-change事件会在用户选择或取消选择行时触发。我们将用户选择的数据存储在selectedRows数组中。

3.3.3 翻页回显

在handlePageChange方法中，我们首先更新当前页码，然后重新获取数据。在数据更新后，我们调用restoreSelection方法来恢复之前选择的数据。

restoreSelection方法遍历当前页的数据，并检查每条数据是否在selectedRows数组中。如果是，则调用toggleRowSelection方法将其标记为已选中。

3.4 测试功能

现在，我们可以运行项目并测试功能。

npm run serve

打开浏览器，访问http://localhost:8080，你将看到一个带有分页功能的表格。你可以选择多行数据，并翻页查看之前选择的数据是否正确回显。

4. 优化与扩展

4.1 数据存储优化

在实际项目中，数据量可能会非常大，直接将所有选择的数据存储在selectedRows数组中可能会导致性能问题。我们可以考虑使用Set来存储选择的数据ID，以减少内存占用。

data() {
  return {
    selectedIds: new Set(), // 使用Set存储选择的数据ID
  };
},
methods: {
  handleSelectionChange(rows) {
    this.selectedIds = new Set(rows.map(row => row.id));
  },
  restoreSelection() {
    this.tableData.forEach((row) => {
      if (this.selectedIds.has(row.id)) {
        this.$refs.multipleTable.toggleRowSelection(row, true);
      }
    });
  },
},

4.2 跨页选择优化

在某些情况下，用户可能需要选择所有页的数据。我们可以提供一个“全选”按钮，允许用户一次性选择所有数据。

<template>
  <div>
    <el-button @click="selectAll">全选</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectedIds: new Set(),
      allData: [], // 存储所有数据
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟从后端获取数据
      const data = [];
      for (let i = 1; i <= 100; i++) {
        data.push({
          id: i,
          date: `2023-10-${i < 10 ? '0' + i : i}`,
          name: `用户${i}`,
          address: `地址${i}`,
        });
      }
      this.allData = data;
      this.total = data.length;
      this.tableData = data.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    handleSelectionChange(rows) {
      this.selectedIds = new Set(rows.map(row => row.id));
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
      this.$nextTick(() => {
        this.restoreSelection();
      });
    },
    restoreSelection() {
      this.tableData.forEach((row) => {
        if (this.selectedIds.has(row.id)) {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        }
      });
    },
    selectAll() {
      this.selectedIds = new Set(this.allData.map(row => row.id));
      this.$refs.multipleTable.clearSelection();
      this.$nextTick(() => {
        this.tableData.forEach((row) => {
          if (this.selectedIds.has(row.id)) {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }
        });
      });
    },
  },
};
</script>

4.3 数据提交

最后，我们需要提供一个提交按钮，允许用户提交选择的数据。

<template>
  <div>
    <el-button @click="selectAll">全选</el-button>
    <el-button @click="submit">提交</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectedIds: new Set(),
      allData: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟从后端获取数据
      const data = [];
      for (let i = 1; i <= 100; i++) {
        data.push({
          id: i,
          date: `2023-10-${i < 10 ? '0' + i : i}`,
          name: `用户${i}`,
          address: `地址${i}`,
        });
      }
      this.allData = data;
      this.total = data.length;
      this.tableData = data.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    handleSelectionChange(rows) {
      this.selectedIds = new Set(rows.map(row => row.id));
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
      this.$nextTick(() => {
        this.restoreSelection();
      });
    },
    restoreSelection() {
      this.tableData.forEach((row) => {
        if (this.selectedIds.has(row.id)) {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        }
      });
    },
    selectAll() {
      this.selectedIds = new Set(this.allData.map(row => row.id));
      this.$refs.multipleTable.clearSelection();
      this.$nextTick(() => {
        this.tableData.forEach((row) => {
          if (this.selectedIds.has(row.id)) {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }
        });
      });
    },
    submit() {
      const selectedData = this.allData.filter(row => this.selectedIds.has(row.id));
      console.log('提交的数据:', selectedData);
    },
  },
};
</script>

5. 总结

通过本文的介绍，我们详细讲解了如何基于el-table实现多页多选及翻页回显功能。我们首先分析了基本需求，然后给出了实现思路，并逐步实现了相关功能。最后，我们还对功能进行了优化和扩展，使其更加实用。

在实际项目中，你可能还需要根据具体需求进行进一步的调整和优化。希望本文能为你提供一些有用的参考，帮助你更好地使用el-table组件。