说明：由于本篇主要讲解全选，所以只会罗列出和其相关的核心代码，并不会将所有的代码一并贴出。

　　界面代码：

                    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