实现vant选择器多选效果

     <template>
    <div>
         <van-field 
                readonly 
                clickable 
                label="类型" 
                required 
                :rules="[{ required: true, message: '不能为空' }]"
                name="type" 
                :value="houseutilizationValue"
                placeholder="请选择" 
                @click="houseutilizationType"/>
            <div v-if="showType" class="popup-bg">
                <div class="popup">
                    <div class="btn">
                        <div @click="cancel" class="cancle">取消</div>
                        <div @click="confirm" class="confirm">确定</div>
                    </div>
                        <van-checkbox-group v-model="result">
                            <van-cell-group>
                                <van-cell
                                    v-for="(item,index) in houseutilizationColumns"
                                    clickable
                                    :key="index"
                                    :title="item.itemValue"
                                    @click="toggle(item,index)"
                                >
                                    <template #right-icon>
                                           <van-checkbox :name="index" ref="checkboxes" />
                                    </template>
                                </van-cell>
                            </van-cell-group>
                        </van-checkbox-group> 
                </div>
            </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            pakerValue:null,
            showType:false,
        	houseutilizationColumns:[{
        		itemCode:1,
        		itemValue:'自住'
        	},{
        		itemCode:2,
        		itemValue:'闲置'
        	},{
        		itemCode:3,
        		itemValue:'出租民宿'
        	},{
        		itemCode:4,
        		itemValue:'出租经营'
        	},{
        		itemCode:5,
        		itemValue:'他人经营'
        	},{
        		itemCode:6,
        		itemValue:'其他'
        	},{
        		itemCode:7,
        		itemValue:'位置'
        	}],
        	activeIndexList:[],
            indexList:[],
            activeIndexListCode:[],
            houseutiliztionCode:[],
            houseutilizationCodeList:[],
            houseutilizationValue:'',
            newhouseutilizationCode:null,
            houseutilizationCode:'', // 房屋利用情况
            oldhouseutilizationCode:null,
            result:[]
        }
    },
   methods:{
    //房屋利用情况输入框点击时间
    houseutilizationType(){
            this.showType= true;
            this.activeIndexList=[];
            this.houseutilizationCode=[]
        },
    // 房屋利用情况弹窗确定按钮
    confirm(){
        	 this.houseutilizationCodeList=[];
             this.activeIndexListCode=[];
             this.result=[];
             this.showType=false;
             this.houseutilizationValue=this.activeIndexList.toString()
             this.newhouseutilizationCode=this.houseutilizationCode
        },
    // 房屋利用情况弹窗确定按钮
    cancel(){
             this.showType=false;
             this.activeIndexListCode=[];
             if(this.newhouseutilizationCode){
                       this.houseutilizationCode=this.newhouseutilizationCode
             }else{
                       this.houseutilizationCode=this.oldhouseutilizationCode
             }
    },
    // 房屋利用情况弹窗多选
    toggle(item,index){
             console.log(item)
             this.$refs.checkboxes[index].toggle();
             this.activeIndexList.push(item.itemValue) // 选项名字
             this.activeIndexListCode.push(item.itemCode) // 选项code
             let arr= [];
             let arrCode=[];
             for(let i = 0;i<this.activeIndexList.length;i++){
                if(arr.indexOf(this.activeIndexList[i]) == -1){
                	//选中的新数组里面没有相同的数据push到选中的新数组里面
                    arr.push(this.activeIndexList[i])
                }else if(arr.indexOf(this.activeIndexList[i]) > -1){
                	//选中的新数组里面有相同的数据，去掉选中的新数组里面的值,代表点击的行已被点击过，这次点击则删除选中数组里面的值
                    let index = arr.indexOf(this.activeIndexList[i]);
                    arr.splice(index,1)
                }
            }
            for(let i = 0;i<this.activeIndexListCode.length;i++){
                if(arrCode.indexOf(this.activeIndexListCode[i]) == -1){
                	//选中的新数组里面没有相同的数据push到选中的新数组里面
                    arrCode.push(this.activeIndexListCode[i])
                }else if(arrCode.indexOf(this.activeIndexListCode[i]) > -1){
                	//选中的新数组里面有相同的数据，去掉选中的新数组里面的值,代表点击的行已被点击过，这次点击则删除选中数组里面的值
                    let index = arrCode.indexOf(this.activeIndexListCode[i]);
                    arrCode.splice(index,1)
                }
            }

             this.activeIndexListCode = arrCode; 
             this.houseutilizationCode=this.activeIndexListCode.toString()
             this.oldhouseutilizationCode=this.houseutilizationCode
             this.activeIndexList=arr
        }
   }
}
</script>
<style>
  .popup-bg{
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height:100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .btn{
      display: flex;
      justify-content: space-between;
  }
  .cancle{
      padding:15px 0px 15px 18px;
      font-size:18px;
      font-weight: bold;
  }
  .confirm{
      padding:15px 18px 15px 0px;
      font-size:18px;
      font-weight: bold;
  }
  .popup{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: 400px;
        overflow: auto;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background: #fff;
    }  
 .item{
            padding: 0 15px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #f7f8f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
.selected{
                width: 16px;
                height: 16px;
               
                background-size: 16px auto;
            }
</style>