ElementUI 遍历实现checkbox组件的多选全选功能

2401_85158651

于 2024-07-04 18:16:19 发布

阅读量446

点赞数 4

分类专栏：资料搜公宗号文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/2401_85158651/article/details/140186735

版权

资料搜公宗号专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<div id="situateConfig">

    <el-dialog title="显示配置" 

        width="45%"

        min-height="300px" 

        :visible.sync="situateDialog" 

        :close-on-click-modal="false">

        <el-form ref="situateForm" :model="situateForm" label-width="100px" size="mini">

            <el-form-item label="选择配置">

                <el-select @change="changeConfig" v-model="situateForm.theme" multiple placeholder="请选择配置" >

                    <el-option

                    v-for="(option,key) in pubsubJson"

                    :key="key"

                    :value="option.name"

                    :label="option.name">{{ option.name}}</el-option>

                </el-select>

            </el-form-item>

            <el-form-item label="配置列表">

                <span  v-if="library.isEmpty(situateForm.theme)">暂未选择配置</span>

            </el-form-item>

            <el-form-item v-if="!library.isEmpty(situateForm.theme)" v-for="(item,key) in choosetopic" :label="item.name" :key="key">

                <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="CheckAll(item)">全选</el-checkbox>

                <el-checkbox-group v-model="item.value" @change="checkChange(item)">

                    <el-checkbox :label="items.name" v-for="(items,index) in item.Params" :key="index"></el-checkbox>

                </el-checkbox-group>

            </el-form-item>

        </el-form>      

        <div slot="footer" class="dialog-footer">

            <el-button type="primary" size="mini" @click="situateConfirm">保 存</el-button>

            <el-button @click="situateDialog = false" size="mini">取 消</el-button>

        </div>

    </el-dialog>    

</div>