vue基于el-table怎么實現多頁多選及翻頁回顯

Vue基于el-table怎么實現多頁多選及翻頁回顯

引言

在Vue.js開發中，Element UI是一個非常流行的UI框架，其中的el-table組件常用于展示表格數據。在實際項目中，我們經常會遇到需要在表格中進行多選操作，并且支持跨頁選擇的需求。此外，當用戶翻頁時，之前選中的數據需要能夠正確回顯。本文將詳細介紹如何基于el-table實現多頁多選及翻頁回顯功能。

1. 基本需求分析

在實現多頁多選及翻頁回顯功能之前，我們需要明確以下幾個基本需求：

1. 多選功能：用戶可以在表格中選擇多行數據。
2. 跨頁選擇：用戶可以在不同頁面中選擇數據，并且之前選擇的數據不會丟失。
3. 翻頁回顯：當用戶翻頁時，之前選擇的數據需要在表格中正確回顯。
4. 數據存儲：需要有一個地方存儲用戶選擇的數據，以便在翻頁時能夠正確回顯。

2. 實現思路

為了實現上述需求，我們可以采用以下思路：

1. 使用el-table的多選功能：el-table組件本身支持多選功能，我們可以通過設置type="selection"來啟用多選列。
2. 跨頁選擇：為了實現跨頁選擇，我們需要在用戶選擇數據時，將選擇的數據存儲在一個全局變量中。這樣，當用戶翻頁時，我們可以根據這個全局變量來回顯之前選擇的數據。
3. 翻頁回顯：在每次翻頁時，我們需要檢查當前頁的數據是否在全局變量中，如果是，則將其標記為已選中。
4. 數據存儲：我們可以使用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組件。