需求：el-table中，ajax分頁的情況下，要支援單頁全選和所有頁全選功能。

　　執行效果如下圖所示：

　　說明：由於本篇主要講解全選，所以只會羅列出和其相關的核心程式碼，並不會將所有的程式碼一併貼出。

　　介面程式碼：

  <el-table :data="tableData"
                    :height="tableHeight"
                    border
                    style="width: 100%"
                    ref="table"
                    @selection-change="handleSelectionChange"
                    >
            <el-table-column prop="id"
                             fixed
                             align="center">
              <el-table-column type="selection"
                               width="75">
              </el-table-column>
              <template slot="header">
                <div>
                  <el-checkbox v-model="checkedAll"
                               @change="changeCheckAll">所有</el-checkbox>
                </div>
              </template>
            </el-table-column>
　　　 ......
　　　　　　</el-table>
          <pager :pager="pager"
                 @query="getList"
                 @setPager="onChangePage"></pager>

       table上使用了ref屬性，因為全選和反選時要用到dom操作方法toggleRowSelection，同樣，表格自動鋪滿縱向螢幕時，也需要進行dom操作，這並非本節所講內容，只是簡單提一下，el-table並沒有像layui中的table那樣提供百分比-固定畫素的方式響應式制定表格高度，我們得手動用js計算瀏覽器螢幕高度。

　　js部分程式碼如下：

 import pager from "@/components/table/Pager.vue";

 export default {
 components: {pager},
  data () {
    return {
   checkedAll: false, //全選所有
 }
 },
  methods: {
   // 全選操作
    handleSelectionChange (val) {
      this.loading = val.length > 0 ? false : true;
        this.multipleSelection = val;
    },
    // 選擇需要的/取消選中
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.table.toggleRowSelection(row);
        });
      } else {
        this.$refs.table.clearSelection();
      }
    },
    //改變全選所有複選框
    changeCheckAll (val) {
      if (val) {
        // 全選選中時當前頁所有資料選中
        this.tableData.forEach(row => {
          if (row) {
            this.$refs.table.toggleRowSelection(row, true);
          }
        });
      } else {
        this.$refs.table.clearSelection();
      }
    },
 }
}

　　在每次點選“頁碼“之後，會自動執行查詢方法，此時，如果點選了全選所有按鈕，要在資料執行查詢之後，再選中當前頁面所有項，程式碼如下所示：

 //執行查詢方法getList後回撥函式當中編寫如下程式碼：
if(this.checkedAll){
           this.$nextTick(()=>{
            this.changeCheckAll(this.checkedAll);
           })
    }

　　由於所有的dom操作要在dom渲染之後執行，所以使用了this.$nextTick()方法。

　　在element-ui

/deep/ .el-table__header .el-table-column--selection .cell .el-checkbox:after {
  content: "當頁";
  color: #606266;
  font-weight: 500;
  margin-left: 10px;
  font-size: 14px;
}

　　/deep/用於在css作用域當中進行樣式透傳，覆蓋子元件的樣式。

　　分頁元件Pager.vue是對el-pagination元件的二次封裝，其程式碼如下：

<!-- 分頁查詢
<pager :pager=[分頁物件] @query=[列表查詢方法] />
-->
<template>
  <div class="pagination-box clear">
    <span class="page-total fl">
      共有記錄：
      <span>{{ pager.total }}</span>條
    </span>
    <el-pagination
      :small="small"
      :layout="layout"
      background
      :pager-count="7"
      :total="pager.total"
      :current-page.sync="pager.pageNum"
      :page-size="pager.pageSize"
      :page-sizes="pageSize"
      @size-change="onChangeSize"
      @current-change="onChangePage"
    ></el-pagination>
    <span v-if="refresh" class="btn-refresh fn-right" title="重新整理" @click="$emit('query')">
      <i class="fas fa-redo"></i>
    </span>
  </div>
</template>

<script>
export default {
  name: "Pager",
  props: {
    small: {
      type: Boolean,
      default: false
    },
    layout: {
      type: String,
      default: "sizes,jumper, prev, pager, next"
    },
    pager: {
      type: Object,
      required: true
    },
    refresh: {
      type: Boolean
    },
    pageSize: {
      type: Array,
      default: () => {
        return [10, 15, 20, 50, 100, 200];
      }
    },
    props: {
      type: Object,
      required: false,
      default: () => ({
        pageNum: "pageNum", // 第幾頁
        pageSize: "pageSize", // 顯示條數
        total: "total" // 總記錄條數
      })
    }
  },
  // 設定繫結引數
  model: {
    prop: "pager",
    event: "setPager"
  },
  computed: {
    total() {
      return this.pager[this.props.total] || 0;
    },
    // 檢測獲取到的資料是否為空
    isEmptyList() {
      return (
        Math.ceil(
          this.pager[this.props.total] / this.pager[this.props.pageSize]
        ) < this.pager[this.props.pageNum]
      );
    }
  },
  watch: {
    total() {
      // 存在記錄但未獲取到資料時, 重新請求
      if (this.pager[this.props.pageNum] > 1 && this.isEmptyList) {
        this.$emit(
          "setPager",
          Object.assign(this.pager, {
            [this.props.pageNum]: this.pager[this.props.pageNum] - 1
          })
        );
        this.$emit("query");
      }
    }
  },
  methods: {
    // 每頁條數
    onChangeSize(pageSize) {
      const temp = {
        [this.props.pageSize]: pageSize,
        // 當顯示條數小於或等於總條數時，重置頁數
        [this.props.pageNum]:
          pageSize <= this.total ? 1 : this.pager[this.props.pageNum]
      };
      this.$emit("setPager", Object.assign(this.pager, temp));
      // 觸發父元件查詢請求
      this.$emit("query");
    },
    // 翻頁
    onChangePage(pageNum) {
      this.$emit(
        "setPager",
        Object.assign(this.pager, { [this.props.pageNum]: pageNum })
      );
      this.$emit("query");
    }
  }
};
</script>
<style lang="scss" scoped>
.pagination-box {
  width: 100%;
  padding-top: 14px;
  position: relative;
  .el-pagination {
    float: right;
  }
  /deep/ .el-pagination__sizes {
    position: absolute;
    top: 14px;
    left: 150px !important;
  }
}
.page-total {
  padding-left: 20px;
  height: 31px;
  line-height: 31px;
  font-size: 14px;
  color: #838383;
}

.page-total span {
  color: #3a3a3a;
}

.closeBtn {
  text-align: center;
  margin-top: 10px;
}

.el-input--small .el-input__inner {
  height: 25px;
  line-height: 25px;
}

.el-input__inner {
  border-color: #838383;
}
.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
  font-size: 19px;
  position: relative;
  top: -3px;
}
.el-pager li {
  margin: 0 8px;
  border-radius: 3px;
  height: 24px;
  line-height: 24px;
  min-width: 20px;
}

.el-pager li.active {
  background: #1881bf !important;
}

.el-pagination__jump {
  margin-right: 20px;
  font-size: 14px;
  color: #838383;
}

.el-pagination__jump .pagination__editor {
  margin-right: 20px;
}

.el-pagination__jump .el-pagination__editor.el-input {
  width: 28px;
}
.el-pagination__jump .el-input__inner {
  box-sizing: border-box;
  width: 100%;
  color: #3a3a3a;
  font-size: 14px;
  border-color: #838383 !important;
  height: 24px;
  line-height: 24px;
  border-radius: 3px;
  background: #fff !important;
}

.el-pagination .el-select .el-input .el-input__inner {
  border-radius: 15px !important;
  font-size: 14px;
  border-color: #838383 !important;
  background: #fff !important;
}
.el-button--text > span > span {
  color: #1881bf;
  font-size: 12px;
  text-decoration: underline;
}
</style>