element中checkbox全选反选功能

单循环：

<el-button @click="handleLimit(scope.row)"
                       type="warning"
                       icon="el-icon-document">权限
</el-button>
<el-dialog title="权限"
               :visible.sync="permissions"
               width="30%">
      <div class="contain">
        <div class="title">
          <p class="text">设备管理</p>
          <div class="func-btn">
            <el-button @click="selectAll"
                       class="all">全选</el-button>
            <span class="cur">/</span>
            <el-button @click="selectInvert"
                       class="invert">反选</el-button>
          </div>
        </div>
        <div class="check">
         <!--这种写法在vscode编译有一点语法问题，所以修正了一下-->
          <!--<div class="funcs"
               v-for="item in funcList">
            <el-checkbox v-model="item.checked" />
            <span class="functs"> {{item.func}}</span>
          </div>-->
         <el-checkbox v-for="(item,index) in funcList"
                       :key="index"
                       v-model="item.checked"
                       @change="handleCheckedChange">{{item.func}}</el-checkbox> 
        </div>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="permissions = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitEdit">确 定</el-button>
      </span>
    </el-dialog>

<script>
export default {
  data () {
    return {
      permissions: false,
      funcList: [
        { func: '新建设备', checked: true },
        { func: '查看设备', checked: true },
        { func: '删除设备', checked: true },
        { func: '禁用设备', checked: false }
      ],
    };
  },
  methods: {
    //权限
    handleLimit (row) {
      this.permissions = true
    },
    //全选
    selectAll () {
      this.funcList.forEach(item => {
        item.checked = true;
      })
    },
    //反选
    selectInvert () {
      this.funcList.forEach(item => {
        item.checked = !item.checked;
      })
    },
    //选择权限提交
    submitEdit () {
      this.permissions = false
    }
  },
};
</script>

<style lang="scss" scoped>
.contain {
  .title {
    overflow: hidden;
    margin-top: -25px;
    .text {
      float: left;
      font-size: 16px;
      font-weight: bold;
    }
    .func-btn {
      float: right;
      margin-top: 15px;
      .all {
        border: 0px;
        padding: 0;
        font-size: 12px;
      }
      .cur {
        margin-left: 5px;
        margin-right: 5px;
      }
      .invert {
        border: 0px;
        padding: 0;
        font-size: 12px;
      }
    }
  }
 .check {
    margin-left: 20px;
    margin-top: 10px;
    width: 185px;
    .el-checkbox {
      margin-bottom: 10px;
    }
    ::v-deep .el-checkbox__label {
      font-size: 15px;
    }
 }
}
</style>

双重循环：

<template>
  <div class="table-container-wapper">
    <div class="func-btn">
      <el-button @click="selectInvert"
                 class="invert">反选</el-button>
      <span class="cur">/</span>
      <el-button @click="selectAll"
                 class="allSelect">全选</el-button>
    </div>
    <div class="choose">
      <el-form ref="form"
               :model="form"
               v-for="(i,block) in form"
               :key="block"
               class="select">
        <el-form-item><span class="text">{{i.name}}</span></el-form-item>
        <el-form-item>
          <el-checkbox v-for="(item,index) in i.funcList"
                       :key="index"
                       v-model="item.checked">{{item.func}}</el-checkbox>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: [
        {
          name: '设备管理',
          funcList: [
            { func: '新建设备', checked: true },
            { func: '查看设备', checked: true },
            { func: '删除设备', checked: true },
            { func: '禁用设备', checked: false }
          ]
        },
        {
          name: '应用管理',
          funcList: [
            { func: '新建应用', checked: true },
            { func: '查看应用', checked: true },
            { func: '删除应用', checked: false },
            { func: '禁用应用', checked: false }
          ]
        },
        {
          name: '产品管理',
          funcList: [
            { func: '新建产品', checked: false },
            { func: '查看产品', checked: true },
            { func: '删除产品', checked: true },
            { func: '禁用产品', checked: false }
          ]
        },
      ],
    };
  },
  methods: {
    //全选
    selectAll () {
      this.form.forEach(i => {
        i.funcList.forEach(item => {
          item.checked = true
        })
      })
    },
    //反选
    selectInvert () {
      this.form.forEach(i => {
        i.funcList.forEach(item => {
          item.checked = !item.checked
        })
      })
    },
  }
};
</script>

<style lang="scss" scope>
.table-container-wapper {
  .func-btn {
    overflow: hidden;
    margin-top: 10px;
    margin-right: 20px;
    padding-top: 20px;
    .invert {
      border: 0px;
      padding: 0;
      float: right;
      font-size: 16px;
    }
    .cur {
      margin-left: 5px;
      margin-right: 5px;
      float: right;
      font-size: 16px;
    }
    .allSelect {
      border: 0px;
      padding: 0;
      float: right;
      font-size: 16px;
    }
  }
  .choose {
    margin-top: -25px;
    width: 90%;
    .select {
      margin-left: 30px;
      .text {
        font-size: 18px;
        font-weight: bold;
      }
      .el-checkbox__label {
        font-size: 16px;
      }
    }
  }
}
</style>

2022.01.20更新：
这个功能需求真的是一改再改，随时更新，现在需要跳转页面平铺且有多个接口需要整合数据成数组
参考这个:Promise.all的使用