Vue CheckBox 全选

Vue CheckBox 全选

 <input type="checkbox" class="checkbox_all" v-model="checkAll" @change="handleCheckAllChange"/>选中
  <div v-for=" row in data.content">
      <input type="checkbox" class="checkbox" :value="row.id" v-model="checkedItems" @change="handleCheckChange"/>
  </div>

  <script>
  export default {
    data () {
      return {
        checkAll: false,
        data: {
          content:[
              {
              id: 1,
              name: 'aaa',
              time: '2017-10-11'
            }, {
              id: 2,
              name: 'bbb',
              time: '2017-10-11'
            }
          ]
        },
        checkedItems: []
      }
    },
    methods: {
     handleCheckAllChange () {
        let items = []
        items = this.data.content.map(item => {
          return item.id
        })
        this.checkedItems = this.checkAll ? items : []
      },
      handleCheckChange () {
        this.checkAll = this.checkedItems.length === this.data.content.length
      }
    }
    }
  </script>