JAVA高级面试进阶训练营视频教程

admin

 data() {
        return {
            list:[
                // 添加属性fale 后的值
                
            ],
            // 测试数据
            goList:[
                {
                    name:'张三',
                    phone:'18621958665'
                },
                {
                    name:'李四',
                    phone:'18621958665'
                },
                {
                    name:'张er',
                    phone:'18621958665'
                },
                {
                    name:'李wu',
                    phone:'18621958665'
                }
            ],
            routerList:[]
        }
    },

　　

// 数据请求
getAjax(){
            const _this = this
            // _this.postRequest('‘, {}, function (data) {
            //         console.log(data, '111')
            //         if (data) {
            //             data.map(val => {
            //                 val.check = false ;
            //                 _this.list.push(val)
            //             })
            //         }else{
            //             _this.$Toast({
            //                 message: '请选择使用人',
            //                 duration: 2000,
            //                 className: 'noticeErrorToast'
            //             });
            //         }
            // })

           _this.goList.map(val => {
                        val.check = false ;   // 添加属性
                        _this.list.push(val)
            })
        },

　　

// 点击切换选中
        goChecked(item,index){
            const _this = this ;
            // 第二种
            // this.$set(item,'check',!item.check)   //undefined  直接转化true

            //第一种
            item.check = !item.check ;
            this.list.splice(index,1,item);   // 有将当前的直接改变掉，替换掉
            if(item.check){
                this.routerList.push(item)
            }else{
                this.routerList.splice(index,1)
            }
            console.log(this.routerList)    // 获取到当前选中的值
        },

　　多选按钮点击事件html：

<section class="registrationList">
           <ul v-for="(item,index) in list" :key="index">
               <div>
                   <img src='../../../../static/img/show/checkedImg.png' v-if="item.check "  @click='goChecked(item,index)'/>
                   <img src='../../../../static/img/show/noneChecked.png' v-if="!item.check " @click='goChecked(item,index)'/>
               </div>
               <div @click="goEdit">
                    <li class="firstLi">{{item.name}}</li>   
                    <li class="secondLi">{{item.phone}}</li>  
               </div>
                 
           </ul>
      </section>

　　css:

.registrationList{
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0 20px 20px ;
}
.registrationList ul{
  width: 100%;
  box-sizing: border-box;
  padding:20px 0 ;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
}
.registrationList ul div:first-of-type{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}
.registrationList li{
   width: 100%;
   box-sizing: border-box;
   line-height: 50px;
   text-align: left;
}
.registrationList img{
    vertical-align: middle;
    width: 36px;
    height: 36px;
}
.firstLi{
    font-size: 34px;
    color:black;
}
.secondLi{
    font-size: 28px;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(153,153,153,1);
}