el-checkbox 全选/反选赋值

最新推荐文章于 2024-10-21 16:11:59 发布

原创最新推荐文章于 2024-10-21 16:11:59 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了如何在Vue.js中使用el-checkbox组件动态绑定数据，并将对象数组转化为数值数组，以便于全选/全不选操作。通过uselist和v-model的配合，展示了如何处理多选状态并保持一致性。

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

我的数据是

[{"label":"住宅","value":"1"},{"label":"商业","value":"2"},{"label":"公寓","value":"3"}]

目的是返回一个数组[1,2,3]

<el-checkbox :indeterminate="isuseIndeterminate" v-model="usecheckAll" @@change="useCheckAllChange">全选</el-checkbox>
                            <el-checkbox-group v-model="select.use" @@change="useCheckedCitiesChange">
                                <el-checkbox v-for="use in uselist" :label="use.value" :key="use.value">{{use.label}}</el-checkbox>
                            </el-checkbox-group>

:label="use.value" 这个必须设置成value,如果设置成了label，会返回中文了。

data:

uselist: [],

isuseIndeterminate: true,
usecheckAll: false,

methods: {
            useCheckAllChange(val) {
                this.select.use = val ? this.uselist.map(v => v.value) : [];
                this.isuseIndeterminate = false;
            },
            useCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.usecheckAll = checkedCount === this.uselist.length;
                this.isuseIndeterminate = checkedCount > 0 && checkedCount < this.uselist.length;
            }
}

this.uselist.map(v => v.value)这句是关键。不然你得到的是对象的数组，赋值不了的。