vue+element实现表格全选所有

 

 

<el-table
          :data="userList"
          highlight-current-row
          :header-cell-style="{ background: '#F9F9FB', color: '#555' }"
          style="width: 100%; border: solid 1px #f2f6fc"
          ref="mListTable"
          :row-key="rowKeyUser"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :reserve-selection="true"
          ></el-table-column>
</el-table>



 data() {
    return {
      userList: [], //用户列表
      activeAll: false, //是否全部选中
      multipleSelection: [], //被勾选的用户
    };
  },



 /**
     *是否全选
     */
    activeAllClick(state) {
      this.activeAll = state;
      this.$nextTick(() => {
        this.$refs["mListTable"].clearSelection();
      });
      if (state) {
        this.$nextTick(() => {
          this.$refs["mListTable"].toggleAllSelection();
        });
      }
    },

/**
     * 获取用户列表
     */
    getUserList() 
      this.userList.splice(0, this.userList.length);
      getUserInfos(params).then((res) => {
        if (res.data.code == 200) {
          this.userList = res.data.data;
          this.total = res.data.count;
          if (this.activeAll) {
            this.$nextTick(() => {
              this.$refs["mListTable"].clearSelection();
              this.$refs["mListTable"].toggleAllSelection();
            });
          }
        }
      });
    },