使用VUE对复选框进行选择

使用VUE对复选框进行选择_第1张图片

实现的功能就是,选中几个复选框,能够返回这几个复选框所在行的管理员用户名。点击全选能够全选,能够返回复选框所在行的管理员用户名。 

先来看一下HTML

 
                    
                        
                            
                              
                        
                        
                        {{item.ainNickname}} 
                        {{item.ainCreateTime}}  
                        {{item.ainId}} 
                        
                            
                            
                            
                        
        
                    
                

关键在于下框内的这一行

使用VUE对复选框进行选择_第2张图片

 我们去@change="checkchange(event,i)中看一下

 //用来同步checkedList   
        checkchange(event,i){
        //可以理解为checkedList 就是复选框自己本身的副本 是有很多个复选框的集合 !!!!!由于 checkedList是自定义 当页面的复选框发生改变的时候,对它本身没有任何直接关系和影响
          this.checkedList[i].status = ! this.checkedList[i].status

          //更新已选择列表
          this.updateChooes();
        },


这里面用了一个方法如下


        //刷新/更新 choose 
        updateChooes(){

            this.chooseLis = [];//清零
            //循环检查判断哪些是已选择的
            for (let i = 0; i < this.checkedList.length; i++) {
                if (this.checkedList[i].status) 
                {
     
                 this.chooseLis.push(this.adminMessageList[i].ainNickname)
                }  
               }
               console.log("ChooseList:-" +this.chooseLis)
     
        }

然后再来看一下我们完整的JS


var vue = new Vue({
    el: '.App',
    data: {
        adminMessageList: [{ ainNickname: 1, ainCreateTime: "高级效果图", number: 1 }, { ainNickname: 2, ainCreateTime: "中级效果图", number: 1 }, { ainNickname: 3, ainCreateTime: "一般效果图", number: 1 }],


        //映射页面上的复选框 被v-for绑定
        checkedList:[
            {id:1,status:0},
            {id:1,status:0},
            {id:1,status:0},
            {id:1,status:0},
            {id:1,status:0},
        ],
        //已经选择的项
        chooseLis:[],



        ddelAdminList:[],
        pager:[
            {id:1},
            {id:2},
            {id:3},
            {id:4},
            {id:5},
            {id:6},
        ],
        a:"",
    }
    ,
    created: function () {
        this.adminMessageList = this.getAdminMessage();
    },
    
    methods: {
        getAdminMessage() {
            var AdminMessageResult;
            $.ajax({
                type: "get",
                async: false, // 同步 一定会等数据返回
                data: {
                    currentPage:"1",
                    pageSize:"5"
                },
                url: "http://127.0.0.1:8088/admin/getAdminMessage",
                success(res) {
             

                    AdminMessageResult = res;
       
                },
                error(res) {
                }

            })
            return AdminMessageResult;
        },
        deleteSingle(i){
            let that = this;
           $.ajax({
            type: "get",
            async: true, // 同步 一定会等数据返回
            data: {
                ainNickname:this.adminMessageList[i].ainNickname,
            },
            url: "http://127.0.0.1:8088/admin/delete",
            success(res) {
  
                that.adminMessageList = res;
              



            },
            error(res) {
            }

        })

        },
        addadmin(){
            var admin = [{"ainAdminIdCd":"2021-08-16 16:33:15","ainId":2,"ainNickname":"admin","ainPhone":"18173350047","ainEmail":"[email protected]","ainCreateTime":"2021-08-16 16:33:15"}]
            this.adminMessageList.push(admin)

        },
        toPager(i){
            let that = this;
          
           // this.pager[i].status  = true;
           $.ajax({
            type: "get",
            async: true, // 同步 一定会等数据返回
            data: {
                 currentPage:(i+1),
                    pageSize:"5"
            },
            url: "http://127.0.0.1:8088/admin/getAdminMessage",
            success(res) {
                that.adminMessageList = res;
                for (let i = 0; i < res.length; i++) {
                    var check = {id:i,status:false}
                    that.checkedList.push(check)
                }
              
            },
            error(res) {
            }

        })

        },
        toLast(){
            let that = this;
           $.ajax({
            type: "get",
            async: true, // 同步 一定会等数据返回
            data: {
                 currentPage:this.pager.length,
                    pageSize:"5"
            },
            url: "http://127.0.0.1:8088/admin/getAdminMessage",
            success(res) {
                that.adminMessageList = res;
            },
            error(res) {
            }
        })
        },

        toFirst(){
            let that = this;
           $.ajax({
            type: "get",
            async: true, // 同步 一定会等数据返回
            data: {
                 currentPage:1,
                    pageSize:"5"
            },
            url: "http://127.0.0.1:8088/admin/getAdminMessage",
            success(res) {
                that.adminMessageList = res;
            },
            error(res) {
            }
            })
        },




        //用来同步checkedList   
        checkchange(event,i){
        //可以理解为checkedList 就是复选框自己本身的副本 是有很多个复选框的集合 !!!!!由于 checkedList是自定义 当页面的复选框发生改变的时候,对它本身没有任何直接关系和影响
          this.checkedList[i].status = ! this.checkedList[i].status

          //更新已选择列表
          this.updateChooes();
        },




        selectAll(){
            let that = this;
            for (let i = 0; i <   that.checkedList.length; i++) {
                that.checkedList[i].status = !that.checkedList[i].status
            }
         
            //刷新choose
            this.updateChooes()
        },




        //刷新/更新 choose 
        updateChooes(){

            this.chooseLis = [];//清零
            //循环检查判断哪些是已选择的
            for (let i = 0; i < this.checkedList.length; i++) {
                if (this.checkedList[i].status) 
                {
     
                 this.chooseLis.push(this.adminMessageList[i].ainNickname)
                }  
               }
               console.log("ChooseList:-" +this.chooseLis)
     
        }
        

}
}
)

重点关注截图红框

使用VUE对复选框进行选择_第3张图片

 

你可能感兴趣的:(记录,vue)