功能总结--三级联动效果，全选，选择班级

效果图

数据都是先进行获取，例如学校和年级的数据固定，主要集中功能的实现

1、watch监听获取班级数据

   //点击样式根据school_id，grade_id判断，data存school_id,grade_id
	school_id(val, old){
   		this.getHomeworkClass()
   	},
   	grade_id(val, old){
   		this.getHomeworkClass()
   	},

2、点击班级，选出已选的班级

• 全选按钮:

将classes（第三栏班级）赋给choosed_classes（第四栏已选班级）,添加id

  chooseAllClassItem() {
    let classes = this.classes;
    let item;
    for (let key in classes){
        item = classes[key]
        item.id =  key
        this.$set(this.choosed_classes,key, item)
    }
}

• 切换

点击班级，将班级切换在第四栏，激活的√是通过choosed_classes[key]实现的

//遍历对象所以 传进来是值，键
toggleClassItem(item, key) {
    this.$set(item, 'id',key)每一个班级添加id
	// 如果有就删除，没有就添加
    if ( this.choosed_classes[key]){
        this.$delete(this.choosed_classes,key)
    }else{
        this.$set(this.choosed_classes, key,item)
    }
}

• 点击移除，某一个已选班级：

             deleteChoosedClass(key) {
   		// 在对象删除某个属性
		this.$delete(this.choosed_classes, key)
   	},

• 清空按钮：

this.$set(this, 'choosed_classes', {})

• 确定已选班级：

将choosed_classes保存在sure_choosed_classes

  classSetSure(){
let choosed_classed = this.choosed_classed
this.$set(this.sure_choosed_classed,JSON.parse(JSON.stringify(choosed_classes))
}