欢迎光临
我的个人博客网站

el-table在ajax分页时支持单页全选和全选所有


  需求:el-table中,ajax分页的情况下,要支持单页全选和所有页全选功能。

  运行效果如下图所示:

   el-table在ajax分页时支持单页全选和全选所有

  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的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组件的二次封装,其代码如下:

el-table在ajax分页时支持单页全选和全选所有el-table在ajax分页时支持单页全选和全选所有

<!-- 分页查询 <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>

View Code

  完!

赞(0) 打赏
未经允许不得转载:张拓的天空 » el-table在ajax分页时支持单页全选和全选所有
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏