element-ui之多选框的使用

最新推荐文章于 2025-03-14 15:15:59 发布

Akatsuki233

最新推荐文章于 2025-03-14 15:15:59 发布

阅读量1.4k

点赞数

分类专栏： element-ui

本文链接：https://blog.youkuaiyun.com/Akatsuki233/article/details/102929569

版权

element-ui 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何在Vue.js中使用多选框组件实现全选与全不选功能，通过v-model双向绑定与v-for循环遍历数据源，实现动态生成多选框并控制选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多选框

<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>