说明：由于本篇主要讲解全选，所以只会罗列出和其相关的核心代码，并不会将所有的代码一并贴出。
界面代码：
style="width: 100%" ref="table" @selection-change="handleSelectionChange">
align="center"> ......
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组件的二次封装，其代码如下：
亚马逊测评 www.yisuping.com