Vue CheckBox 全选

来源:互联网 发布:oncity中山网络社区 编辑:程序博客网 时间:2024/06/07 05:48

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>
原创粉丝点击