一、概述

1. 最近在学习vue相关知识。通过菜鸟教程中单选框、复选框渲染的代码测试之后，自己也写了一下代码来实现复选框如何默认勾选的功能；

二、案例介绍

1. 实现思路
   定义一个对象数组来存储id值、和中文名称，除此之外，再定义一个对象，对象里面放置一个数组来存储想要被勾选的id集合。
2. 代码实现

<template>
    <div id="computed_props" class="cls2">
         <label v-for="post in postIdList" :key="post">
             <input type="checkbox" :value="post.postId" v-model="user.postIdList" >{{post.postName}}
         </label>
</div>
</template>
<script>
export default {
  name: 'ComputedProp',
  data () {
    return {
      postIdList: [{'postId': 0, 'postName': '董事长'}, {'postId': 1, 'postName': '董事长秘书'}],
      user: {
        'name': '测试管理者',
        postIdList: [1, 2]
      }
    }
  },
  methods: {
  },
  computed: {
  },
  watch: {
}
</script>
<style>
</style>

3. 页面效果
   
4. 代码分析
   主要是通过 :value和v-model双向绑定完成复选框的默认勾选。首先通过label标签中的v-for循环遍历postIdList对象数组，:value来绑定循环过程中每次取出的对象id，进而与user对象中postIdList数组中id值进行匹配，如果含有，就默认勾选；不含有，就不勾选；

1、el-table如果我们想新增一个勾选框，在  .vue文件中

<el-table-column type="selection" width="55" align="center" />

如果不需要加这个勾选框，直接不写上面那行代码即可 

<template>
  <div class="app-container">

    <!--@selection-change="handleSelectionChange"> table的选择项改变触发事件 -->
    <el-table v-loading="loading" :data="userList"> <!--@selection-change="handleSelectionChange">-->
      //勾选框
      <!--<el-table-column type="selection" width="55" align="center" />-->

      <el-table-column label="用户名" align="center" prop="user.userNameCn" />

      <el-table-column label="时间" align="center" prop="begintime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.begintime, '{y}-{m}-{d} {HH}:{mm}:{ss}') }}</span>
        </template>
      </el-table-column>

  </div>
</template>

2、设置勾选框默认勾选、禁用

 <el-table 
   ref="table"
   :data="tableData"
   stripe
   border
   @select="selectSingle"           <!--单独勾选某行数据的勾选框-->
   @select-all="selectAll"          <!--勾选头部勾选框，进行全选或者全不选-->
 >
  <el-table-column
    type="selection"
    fixed
    width="50"
    align="center"
    :selectable="selectable"         <!--设置禁用或非禁用状态-->
  >
</el-table>

单选，全选事件响应

methods:{
       //一、获取列表数据
       storageList(){
         serviceApi.storageList({}).then(res => {
           if(res.data.successFlg && res.data.data){
             //1、获取列表数据，存入tableData
             this.tableData = res.data.data ? res.data.data : [];
             //2、筛选出remark为“1”的数据，该数据勾选状态需要设置为勾选且禁用
             if(this.tableData.length > 0){
               let checkedData = this.tableData.filter((item) => {
                 return item.remark === '1';
               });
               let $this = this;
               //3、一定要使用this.$nextTick()，等数据都渲染到表格中再设置勾选状态，否则直接使用$this.$refs.table.toggleRowSelection(item);没有效果
               this.$nextTick(() => {
                 if(checkedData.length > 0){
                   checkedData.forEach((item) => {
                    //toggleRowSelection(row, selected)方法接受两个参数，row传递被勾选行的数据，selected设置是否选中
                     $this.$refs.table.toggleRowSelection(item，true);
                   });
                 }
               });
             }
           }
         }).catch(err => {
           console.error(err);
         });
       },
       
       //二、单独勾选表格中某条数据所对应的勾选框
       selectSingle(selection,row){
         let data = {
           remark:'1',
           id:row.id
         };
         serviceApi.saveMediaStorageSpace(data).then(res => {
           if(res.data.successFlg && res.data.data){
             this.$message.success('成功');
             this.storageList();//列表数据刷新
           }else{
             this.$message.error('失败');
           }
         }).catch(err => {
           console.error(err);
         });
       },
       //三、勾选头部的勾选框，进行全选
       selectAll(selection){
         if(selection.length > 0){//length>0表示全选，length=0为全不选
           selection.forEach((item) => {
             let data = {
               remark:1,
               id:item.id
             };
             serviceApi.saveMediaStorageSpace(data).then(res => {
               if(res.data.successFlg && res.data.data){
                 this.$message.success('成功');
                 this.storageList();//列表数据刷新
               }else{
                 this.$message.error('失败');
               }
             }).catch(err => {
               console.error(err);
             });
           });
         }
       },
       //四、设置表格中勾选框是否是禁用状态
       selectable(row,index){
         if(row.remark === '1'){
           return false;//禁用状态
         }else{
           return true;//非禁用状态
         }
       },
    }

1、如果是表格中一开始没有数据，需要通过请求接口获取数据或者从其他途径获取数据的话，
那么一定要记得再获取完数据之后使用this.nextTick( ) ， 在 this.nextTick()，在this.nextTick()，在this.nextTick()的回调中使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态
2、如果是静态数据的话，则可以直接使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态，如下：

export default {
    name:'app',
    data(){
      return {
        tableData:[
          {
            name:'c',
            romTotal:22
          },
          {
            name:'d',
            romTotal:11
          },
          {
            name:'f',
            romTotal:33
          }       
        ],//  表格数据
        tableHeader:[ //表格头部
          {
            label: '表头1',
            width: '150',
          },
          {
            label: '表头2',
            width: '150',
          }
        ],
      }
    },
    mounted(){
      this.$refs.table.toggleRowSelection(tableData[0],true);
    }
}

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

先来看一下HTML

 <tbody>
                    <tr v-for='(item,i) in adminMessageList'>
                        <td class="tablecheckbox_td">
                            <!-- :checked=ture     进行布尔判断，来改变当前复选框的状态   checkedList[i].status    @change 监听复选框改变   如果改变执行checkchange  -->
                            <input class="tablecheckbox" type="checkbox" :checked=checkedList[i].status       @change="checkchange(event,i)">  
                        </td>
                        
                        <td >{{item.ainNickname}}</td> 
                        <td >{{item.ainCreateTime}}</td>  
                        <td >{{item.ainId}}</td> 
                        <td>
                            <button id="online" class="btn btn-success btn-xs" type="button" @click="addadmin()">查看</button>
                            <button id="online" class="btn btn-danger btn-xs" type="button">修改</button>
                            <button id="online" class="btn btn-danger btn-xs" type="button" @click="deleteSingle(i)">删除</button>
                        </td>
        
                    </tr>
                </tbody>

关键在于下框内的这一行

 我们去@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":"1349578685@qq.com","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)
     
        }
        

}
}
)

重点关注截图红框