element-ui之多选框的使用

 多选框

<el-checkbox-group v-model="items">
    <el-checkbox v-for="(item, index) in allItems" :key="index" :label="item.id">{{item.label}}</el-checkbox>
</el-checkbox-group>
<el-button @click="selectAll" type="button" size="small">全选</el-button>
<el-button @click="unSelectAll" type="button" size="small">全不选</el-button>

<script>
data () {
    // 这里的items和 allItems都是数组。
    // items对应多选框的:label="item.id",当选中某个多选框时，会把该id加到items中
    items: ['1', '3'],
    allItems: [
        {id: '1', label: '苹果'},
        {id: '2', label: '橘子'},
        {id: '3', label: '香蕉'},
        {id: '4', label: '火龙果'},
        {id: '5', label: '西瓜'},
    ]
},
methods: {
    // 把allItems所有的id都赋值给items
    selectAll () {
      for (let i in this.allItems) {
        this.items.push(this.allItems[i].id)
      }
    },
    unSelectAll () {
      this.items = []
    },
}

</script>