需求：el-table中，ajax分頁的情況下，要支持單頁全選和所有頁全選功能，
運行效果如下圖所示：
說明：由于本篇主要講解全選，所以只會羅列出和其相關的核心代碼，并不會將所有的代碼一并貼出，
界面代碼：
<el-table :data=https://www.cnblogs.com/jiekzou/p/"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的Table組件當中，并沒有提供給表頭當中的復選框設定文本的屬性和方法，我們可以通過使用css偽類來創建文本，
/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 > <span > 共有記錄： <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" title="重繪" @click="$emit('query')"> <i ></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>View Code
最重要的一點，就是所有頁全選時的id集合，是每次查詢時傳遞過來的，將其臨時存盤在data中，這樣的話需要進行批量操作時，可以直接將這些id集合傳遞過去，當然，如果查詢介面不把這些id集合帶過來，我們也可以傳一個所有頁全選的標識給到后端，后端根據這個標識，重新去查詢資料，
完！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/202443.html
標籤：JavaScript