Vue实现全选、反选、全不选功能

一、搭建自己所需要的table列表

<div class="mian">
        <table width="150" height="40" cellspacing="0">
          <tr>
            <td>
              <input type="checkbox">
            </td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox">
            </td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
        </table>
  </div>

二、渲染数据

<template>
  <div class="mian">
        <table width="150" height="40"  cellspacing="0">
          <tr>
            <td>
              <input type="checkbox">
            </td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
          </tr>
          <tr v-for="(item,index) in list" key="item.id">
            <td>
              <input type="checkbox">
            </td>
            <td>{
   
   {item.name}}</td>
            <td>{
   
   {item.sex}}</td>
            <td>{
   
   {item.age}}</td>
          </tr>
        </table>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        list:[
          {id:'12345678',name:'张三',sex:0,age:'19'},
          {id:'12344677',name:'李四',sex:1,age:'19'},
          {id:'12343674',name:'王五',sex:0,age:'19'},
          {id:'12342673',name:'赵六',sex:0,age:'19'},
          {id:'12341672',name:'小花',sex:1,age:'19'}
        ] //list模拟接口请求出来的数据
      }
    },
    methods:{

    }
  }
</script>

现在运行一下代码，看看你运行后是否如下图一样（样式除外）：

 三、向数据中添加字段及v-model对应字段

<template>
  <div class="mian">
        <table width="150" height="40"  cellspacing="0" >
          <tr>
            <td>
              <input type="checkbox"  v-model="allchecked">
            </td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
          </tr>
          <tr v-for="(item,index) in list" key="item.id">
            <td>
              <input type="checkbox" v-model="item.checkeds">
            </td>
            <td>{
   
   {item.name}}</td>
            <td>{
   
   {item.sex}}</td>
            <td>{
   
   {item.age}}</td>
          </tr>
        </table>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        allchecked:false,// table表头复选框字段
        list:[
          {id:'12345678',name:'张三',sex:0,age:'19'},
          {id:'12344677',name:'李四',sex:1,age:'19'},
          {id:'12343674',name:'王五',sex:0,age:'19'},
          {id:'12342673',name:'赵六',sex:0,age:'19'},
          {id:'12341672',name:'小花',sex:1,age:'19'}
        ] //list模拟接口请求出来的数据
      }
    },
    mounted() {
      this.list.map((item,index)=>{
          item.checkeds=false;
      }) //向列表每一条数据中添加checkeds字段
    },
    methods:{

    }
  }
</script>

四、全选、全不选实现方式

 methods:{
        //实现全选功能
        inputcheck(){
             this.list.map((item,index)=>{
                 item.checkeds=!this.allchecked;
             })
        }
    }

五、反选实现方式

  methods:{
        //实现全选功能
        inputcheck(){
             this.list.map((item,index)=>{
                 item.checkeds=!this.allchecked;
             })
        },
        // 实现反选功能
        tdcheckeds(){
           let self = this;
             this.list.map((item,index)=>{
                 if(item.checkeds!==false){
                   self.allchecked=item.checkeds;
                   self.checkedlist.push(item);
                 }else{
                   let e = self.checkedlist;
                   for (let i = 0; i <= e.length; i++) {
                     if (e[i] !== undefined) {
                       if (e[i].id === item.id) {
                         self.checkedlist.splice(i, 1);
                       }
                     }
                   }
                 }
             })
        }
    },
      watch:{
      checkedlist(e){ //如果多选数据发生改变时就会运行次函数
        if (e.length === 0) {
          this.allchecked = false;
        }
      }
    }

六、table属性