el

　　需求：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>

      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渲染之后执行，所以使用了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

　　完！

原文转载：http://www.shaoqun.com/a/488029.html

promotion：https://www.ikjzd.com/w/127

dmm.adult：https://www.ikjzd.com/w/2026

ideal：https://www.ikjzd.com/w/2286

需求：el-table中，ajax分页的情况下，要支持单页全选和所有页全选功能。　　运行效果如下图所示：　　　　　　界面代码：<el-table:data="tableData":height="tableHeight"borderstyle="width:100%"ref="table"@selection-c
acca是什么：https://www.ikjzd.com/w/1370
韩国naver：https://www.ikjzd.com/w/1727
深圳哪里购物比较好？：http://tour.shaoqun.com/a/290.html
上海热带风暴门票_热带风暴门票价格_热带风暴门票多少钱 ：http://tour.shaoqun.com/a/55720.html
肇庆白土宋隆小镇景点介绍？高腰白土宋隆小镇有什么好玩的？：http://tour.shaoqun.com/a/69765.html