element UI中显示隐藏和多选输入的实现

1.关于页面中块的显示隐藏

<div v-show=”show”>
<div @click=”show=!show”>
    <I class=”iconfont” :class=”show？‘一种图标’:’另一种图标’’”>//:class可以实现class的绑定
</div>

2.页面中输入框同时能够实现点击全选

<el-input v-model="form.school" 
:placeholder="checkedSchool.length?checkedSchool.length+'项':'不限'"
@focus="inputFocus(e)" @blur="inputBlur">
</el-input>
<i class="iconfont" @click.stop="schoolClick()">
<div class="school-checkbox" v-show="schoolShow">
   <el-checkbox :indeterminate="isSchoolAllCheck" v-model="checkAll" 
   @change="handleCheckAllChange($event,'school')">全选</el-checkbox>
    <i class="iconfont icon-guanbi pointer" @click.stop="schoolShow=false"></i>
    <el-checkbox-group v-model="checkedSchools" 
    @change="handleCheckedSchoolChange($event,'school')">
      <el-checkbox v-for="(item,index) in selectOptions.school.options" 
    :label="item.label" :key="index">{{item.value}}
      </el-checkbox>//selectOptions.school.options为后台传入的学校处理过的为label和value的形式
    </el-checkbox-group>

</div>
-------------数据渲染中----------------
data(){
  return {
    checkedSchools:[],
    isSchoolAllCheck:false,
    checkAll:false,
    schoolShow:false
  }
},
methods{
  schoolClick(){
    this.shoolShow=!this.schoolShow
  },
  schoolShow(){
    <el-checkbox></el-checkbox>
  },
  handleCheckAllChange(val,type){
    this.cleckedSchools=val?后台的学校长度:[];
    this.form.checkedSchools=this.checkedSchools;//将选中的数据存放在form表单中
  }，
  handleCheckedSchoolChange(val,type){
    let checkoutCount=val.length;
    this.checkAll=checkoutCount===this.后台学校长度；
    this.isSchoolAllCheck=checkoutCount>0&&checkoutCount<this.后台学校长度
    this.form.checkedSchools=this.checkedSchools;//将选中的数据放在表单中
  },
  //输入框输入发生
  inputFocus(e){
    
  }，
  //输入框失去焦点
  inputBlur(e){
    e.target.setAttribute('readonly','readonly')
  }
}

主要参考代码