1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<table class="table table-bordered">

    <tr>

      <td><input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()"></td>

      <td>{{$t('account.name')}}</td>

      <td>{{$t('account.model')}}</td>

      <td>{{$t('account.onTime')}}</td>

      <td>{{$t('account.prepared')}}</td>

      <td>{{$t('account.Ip')}}</td>

      <td>{{$t('account.status')}}</td>

   </tr>

   <tr v-for="item in collectionList">

      <td><input type="checkbox" :id="item.name" :value="item.name" v-model="checkedNames"></td>

      <td>{{item.name}}</td>

      <td>{{item.model}}</td>

      <td>{{item.time}}</td>

      <td>{{item.yn}}</td>

      <td>{{item.ip}}</td>

      <td>{{item.status}}</td>

    </tr>

</table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

new Vue({

    el: '#app',

    data: {

        collectionList:[{name:'Collection1',model:'zy-asdsa21311231',status:'上线',yn:'y',time:'2019-6-30',ip:'192.168.8.78'},

                  {name:'Collection2',model:'zy-asdsa21311231',status:'失联',yn:'y',time:'2019-6-30',ip:'192.168.8.78'},

                  {name:'Collection3',model:'zy-asdsa21311231',status:'上线',yn:'n',time:'2019-6-30',ip:'192.168.8.78'},

                  {name:'Collection4',model:'zy-asdsa21311231',status:'上线',yn:'y',time:'2019-6-30',ip:'192.168.8.78'},

                  {name:'Collection5',model:'zy-asdsa21311231',status:'失联',yn:'n',time:'2019-6-30',ip:'192.168.8.78'}

          ],

      checkedNames: [],

      checked:false,

    },

    methods: {

        changeAllChecked: function() {

            if (this.checked) {

            var collectionList = this.collectionList

                for(let key in collectionList) {

                  console.log(collectionList[key]);

                  this.checkedNames.push(collectionList[key].name);

                }

            } else {

                this.checkedNames = []

            }

        }

    },

    watch: {

        "checkedNames": function() {

                      console.log(this.checkedNames+"---"+this.collectionList+"----"+this.checked);

            if (this.checkedNames.length == this.collectionList.length) {

                this.checked = true

            } else {

                this.checked = false

            }

        }

    }

})