el-table表格翻頁後仍記憶所選項

時間 2019-11-08

標籤 table 表格翻頁後仍記憶選項简体版

原文原文鏈接

el-table多選，對於當前頁的多選咱們是很容易知道並顯示給用戶的，可是對於分頁後要記住哪些頁多選了哪些數據，並正確的顯示給用戶就有點小挑戰了。
具體實現：
第一種，搬運工在此😊，來自於大佬的文章詳戳👇css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
    <div id="app">
      <el-table
        ref="multipleTable"
        :data="tableData"
        @select="handleSelect"
        @select-all="handleSelectAll"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="索引" width="120" prop="index">
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        checkData: [],
        tableData: [],
        total: 11,
      },
      methods: {
        /** 
        * 獲取分頁數據
        * 若是該頁存在選中的數據，則選中
        */
        addDataItem(val, len) {
          this.tableData = Array.from({length: len}, (v, i) => v = {
            index: i,
            id: `${val}${i}`,
          });
          if (this.checkData.length) {
            this.toggleSelection(this.checkData);
          }
        },
        handleCurrentChange(page) {
          if (page === 1) {
            this.addDataItem(1, 10);
          } else {
            this.addDataItem(2, 1);
          }
        },
        /** 
        * 單選
        */ 
        handleSelect(selection, row) {
          let allRows = selection.filter((item) => !!item);
          if (allRows.find(item => item.id === row.id)) {
            this.addRows([row]);
          } else {
            this.removeRows([row]);
          }
        },
        /** 
        * 全選
        */ 
        handleSelectAll(selection) {
          if (selection.length > 1) {
            this.addRows(this.tableData);
          } else {
            this.removeRows(this.tableData);
          }
        },
        addRows(rows) {
          for (const key of rows) {
            if (!this.checkData.find((item) => item.id === key.id)) {
              this.checkData.push(key);
            }
          }
        },
        removeRows(rows) {
          if (this.checkData.length > 0) {
            for (const key of rows) {
              this.checkData = this.checkData.filter((item) => item.id !== key.id);
            }
          }
        },
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$nextTick(() => {
                const checked = this.tableData.find(tableRow => tableRow.id === row.id);
                this.$refs.multipleTable.toggleRowSelection(checked, true);
              });
            });
          } else {
            this.$refs.multipleTable.toggleRowSelection(this.tableData, false);
            this.removeRows(this.tableData);
          }
        }
      },
      created() {
        this.addDataItem(1, 10);
      },
    });
  </script>
</body>
</html>

第二種，翻看element-ui官方文檔，原來已經有實現的方法了，很是簡單
html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
    <div id="app">
      <el-table
        ref="multipleTable1"
        :data="tableData"
        @selection-change="handleSelectionChange"
        :row-key="getRowKeys">
        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
        <el-table-column label="索引" width="120" prop="index">
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        :current-page.sync="currentPage"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        checkData: [],
        tableData: [],
        total: 13,
        currentPage: 1,
      },
      methods: {
        /** 
        * 獲取分頁數據
        */
        addDataItem(val, len) {
          this.tableData = Array.from({length: len}, (v, i) => v = {
            index: i,
            id: `${val}${i}`,
          });
        },
        handleCurrentChange(page) {
          this.currentPage = page;
          if (page === 1) {
            this.addDataItem(1, 10);
          } else {
            this.addDataItem(2, 3);
          }
        },
        handleSelectionChange(val) {
          this.checkData = val;
        },
        getRowKeys(row) {
          return row.id;
        },
      },
      created() {
        this.addDataItem(1, 10);
      },
    });
  </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。