计算属性computed中的set和get使用例子（VUE+ElementUI）

功能说明：

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

附上DEMO链接： DEMO

HTML

        

          
          

            
              
                
                  
                    
                  
                
              
            
          
          

            

              

                

                  
                    

                      加载中
                    
                  
                
              
            

            

              发送
              取消选中
            
          
        
      

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
                }
              }
            }
          }
        }
      }
  }
    })