下拉框

Posted 2020-11-30 hwj369

<template>
  <div class="about">
    <h1>about page</h1>
    <el-row>
  <el-col :span="2"><div class="grid-content bg-purple">11</div></el-col>
  <el-col :span="22"><div class="grid-content bg-purple-light">22</div></el-col>
</el-row>
<el-row>
  <el-col :span="2"><div class="grid-content bg-purple"></div>11</el-col>
  <el-col :span="22"><div class="grid-content bg-purple-light">22</div></el-col>
</el-row>
<el-row>
  <el-col :span="2"><div class="grid-content bg-purple"></div>111</el-col>
  <el-col :span="22">
    <el-row>
  <el-col :span="24"><div class="more">
    <div v-show="istrue">
      <ul class="zij">
        <li v-for="(item,index) in zimu" :key="index"
         @click="changeck(item)"
         :class="back==item?‘back‘:‘‘"
         >{{item}}</li>
      </ul>
    </div>
    <div class="dis">
       <div :class="selecttab== ‘all‘?‘change‘:‘unSelected‘">
       
    <el-checkbox-group v-model="checkboxGroup3" size="small" v-if="isshow">
      <el-checkbox-button v-for="city in cities" :label="city"  :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
     <el-checkbox-group v-model="checkboxGroup3" size="small" v-else>
      <el-checkbox-button v-for="city in newlist" :label="city"  :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
  </div>
    <van-button type="primary" size="mini" @click="moreclock">{{news}}</van-button>

    </div>
    
  </div></el-col>
</el-row>
    <el-row>
  <el-col :span="24"><div >已选：{{checkboxGroup3}}</div></el-col>
</el-row>

  </el-col>
</el-row>
   
    

  </div>
</template>
  <script>
  const cityOptions = [‘上海‘, ‘北京‘, ‘广州‘, ‘深圳‘,‘上海‘, ‘北京‘, ‘广州‘, ‘深圳‘];
export default {
  data(){
    return{
      back:‘‘,
      istr:‘‘,
      selecttab:‘all‘,
       checkboxGroup3: [‘上海‘],
       checkboxGroup4:[‘A‘],
        cities: cityOptions,
        cit:[‘方法‘,‘广告‘,‘方法‘,‘试试‘,‘嘿嘿‘,
        ‘啊啊‘,‘额额‘,‘规范‘,‘一键‘,‘设置‘,‘让他‘,‘虽然‘,‘色‘,
        ‘制作‘,‘规范‘,‘个人‘,‘方法‘,‘广告‘,‘方法‘,‘试试‘,‘嘿嘿‘,],
        newlist:[],
        zimu:[‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘,‘G‘,‘H‘,‘I‘,‘J‘,
        ‘K‘,‘L‘,‘M‘,‘N‘,‘O‘,‘P‘,‘Q‘,‘R‘,‘S‘,‘T‘,‘U‘,‘V‘,‘W‘,‘X‘,‘Y‘,‘Z‘],

        isshow:true,
        istrue:false,
        news:‘查看更多‘

}
  },methods:{
    moreclock(){
      this.isshow=!this.isshow
      this.istrue=!this.istrue
      
      this.selecttab = !this.selecttab
      if (this.isshow) {
        this.news = ‘查看更多‘
      }else{
         this.news = ‘收起‘
      }
     this.newlist= this.cities.concat(this.cit)
      console.log(this.newlist)
    },
    changeck(i){
         console.log(i)
         this.back = i
         this.istr = true
    }

  },

   mounted(){
     console.log(this.$route.params.id)
   }
}

</script>
<style lang="scss" scoped>
.el-row{
   border: 0.3px solid gray;
   
   & :nth-child(3){
     
   }

}
.more{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .change{
    min-height: 40px;
    max-height: 120px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    // overflow: scroll;
    // overflow-x:hidden;
  }
  .unSelected{
     max-height: 120px;
    overflow: scroll;
     overflow-x:hidden;
    
  }
.zij{
  display: flex; 
  max-width: 80%;
  li{
    padding-left: 10px;
    cursor: pointer;
  }

}
.dis{
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
  
}
.back{
  color: aqua;
}


</style>