功能说明：

底部为缩略图，中间为缩略图对应的多张图片内容，类似标签页切换。右上角绿色区域为全选或取消选中，操作单一缩略图对应的所有图片，本文主要记录右上角区域的操作，利用到了计算属性的set和get方法。
要求：
1、勾选后当前展示的图像全部选中，取消勾选则当前全部图片取消选中；
2、取消勾选某一张图片时，选中状态切换为未选中；
3、切换不同缩略图时，验证对应图片是否全选，是则处于勾选状态，否则取消；
4、点击发送时获取全部缩略图中已勾选的图像。

附上DEMO链接： DEMO

HTML

<div id="app">
        <div id="imageIdBox">
          <el-checkbox class="extra" v-model="isCheckAll"></el-checkbox>
          <div class="content">
            <el-checkbox-group v-model="checkImageList">
              <el-row :gutter="10">
                <el-col v-for="(image,index) in imageIdList" :key="index">
                  <el-checkbox :label="image">
                    <el-image :src="image" alt="" lazy></el-image>
                  </el-checkbox>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </div>
          <div class="footer">
            <div class="pat-content">
              <ul>
                <li
                  v-for="(item,index) in imgList" :key="index"
                  @click="selectImageIdList(item)"
                >
                  <el-image :src="item[0]" alt>
                    <div slot="placeholder" class="image-slot">
                      加载中
                    </div>
                  </el-image>
                </li>
              </ul>
            </div>

            <div class="btn">
              <el-button type="primary" @click="sendImageId" :disabled="!checkImageList.length">发送</el-button>
              <el-button type="primary" @click="checkImageList = []" :disabled="!checkImageList.length">取消选中</el-button>
            </div>
          </div>
        </div>
      </div>

VUE

new Vue({
      el: '#app',
      data: function() {
        return { 
          checkImageList: [],// 所有选中图像
          imageIdList:[], // 缩略图对应图像列表
          // 全部图像
          imgList:[
            [
              "http://placehold.it/40x40?v=1",
              "http://placehold.it/40x40?v=2",
              "http://placehold.it/40x40?v=3",
            ],
            [
              "http://placehold.it/50x40?v=1",
              "http://placehold.it/50x40?v=21",
              "http://placehold.it/50x40?v=3",
              "http://placehold.it/50x40?v=4"
            ]
          ]
        }
      },
  methods:{
    selectImageIdList(item) {
      this.imageIdList = item;
    },
    sendImageId() {
      console.log(this.checkImageList)
    }
  },
  computed:{
    // 选中状态
    isCheckAll:{
    	// 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
        get:function() {
          // 验证序列是否全选
          let imageIdIndex = 0;
          for (let i = 0; i < this.imageIdList.length; i++) {
            for (let j = 0; j < this.checkImageList.length; j++) {
              if (this.checkImageList[j] == this.imageIdList[i]) {
                imageIdIndex++
                break
              }
            }
          }
          return imageIdIndex == this.imageIdList.length ? true : false
        },
        // 监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
        set:function(val) {
        // 触发等同于change的事件
          if (val == true) {
            this.imageIdList.forEach(item => {
              this.checkImageList.push(item);
            })
            this.checkImageList = Array.from(new Set(this.checkImageList))
          } else {
            for (let i = 0; i < this.imageIdList.length; i++) {
              for (let j = 0; j < this.checkImageList.length; j++) {
                if (this.checkImageList[j] == this.imageIdList[i]) {
                  this.checkImageList.splice(j, 1)
                  break
                }
              }
            }
          }
        }
      }
  }
    })