element 实现多个循环出来的复选框，以及回显

最新推荐文章于 2024-09-04 08:33:34 发布
最新推荐文章于 2024-09-04 08:33:34 发布
阅读量5.6k 收藏 18
点赞数 5
分类专栏： element 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wqnmlgbsz/article/details/108538637
版权

 

1.效果图如上     下面是demo1，点击aaaa 所有rule里面的链接 放到一个数组里面

<style scoped>

</style>

<template>
    <el-form label-width="200px">
        <el-button @click="aa">点击我打印结果</el-button>
        <el-form-item v-for="item in cities" :key="item.rule" style="border-top: 1px solid red;">
            <el-checkbox @change="val => handleCheckAllChange(val, item)" 
                         :indeterminate="itemIndeterminate(item)" 
                         v-model="item.checkAll"
            >{{item.label}}</el-checkbox>
            <el-checkbox-group v-model="checkedCities">
                <el-checkbox v-for="city in item.items" :key="city.rule" :label="city.rule">{{city.label}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                cities: [],
                checkedCities: []
            }
        },
        methods: {
            getList() {
                // 假设是后台获取的数据
                const data = [{
                        "label": "客户管理",
                        "rule": "/customer/customer/*",
                        "items": [{
                                "label": "修改工艺标准",
                                "rule": "/customer/customer/update-process-standard"
                            },
                            {
                                "label": "客户保存",
                                "rule": "/customer/customer/save"
                            },
                            {
                                "label": "客户查询",
                                "rule": "/customer/customer/index"
                            },
                            {
                                "label": "更新客户状态",
                                "rule": "/customer/customer/update-state"
                            },
                            {
                                "label": "更新计价模型",
                                "rule": "/customer/customer/update-offer"
                            },
                            {
                                "label": "查看客户",
                                "rule": "/customer/customer/detail"
                            },
                            {
                                "label": "查看工艺标准",
                                "rule": "/customer/customer/process-standard"
                            },
                            {
                                "label": "查看计价模型",
                                "rule": "/customer/customer/get-offer"
                            }
                        ]
                    },
                    {
                        "label": "工厂建模",
                        "rule": "/factory/factory/*",
                        "items": [{
                                "label": "产线列表",
                                "rule": "/factory/factory/line-list"
                            },
                            {
                                "label": "产线启用/停用",
                                "rule": "/factory/factory/enable-line"
                            },
                            {
                                "label": "修改工厂信息",
                                "rule": "/factory/factory/update"
                            },
                            {
                                "label": "关联工位",
                                "rule": "/factory/factory/relate-pos"
                            },
                            {
                                "label": "创建产线",
                                "rule": "/factory/factory/create-line"
                            },
                            {
                                "label": "创建工位",
                                "rule": "/factory/factory/create-pos"
                            },
                            {
                                "label": "创建工厂",
                                "rule": "/factory/factory/create-factory"
                            },
                            {
                                "label": "工位启用/停用",
                                "rule": "/factory/factory/enable-pos"
                            },
                            {
                                "label": "工位列表",
                                "rule": "/factory/factory/pos-list"
                            },
                            {
                                "label": "工厂信息",
                                "rule": "/factory/factory/factory-info"
                            },
                            {
                                "label": "工厂列表",
                                "rule": "/factory/factory/list"
                            },
                            {
                                "label": "工厂启用/停用",
                                "rule": "/factory/factory/enable"
                            },
                            {
                                "label": "工厂树状图",
                                "rule": "/factory/factory/tree"
                            },
                            {
                                "label": "所属工位列表",
                                "rule": "/factory/factory/belong-station"
                            },
                            {
                                "label": "查看产线",
                                "rule": "/factory/factory/line-info"
                            },
                            {
                                "label": "查看工位",
                                "rule": "/factory/factory/pos-info"
                            },
                            {
                                "label": "查看设备",
                                "rule": "/factory/factory/device-info"
                            },
                            {
                                "label": "添加设备",
                                "rule": "/factory/factory/create-device"
                            },
                            {
                                "label": "设备列表",
                                "rule": "/factory/factory/device-list"
                            }
                        ]
                    },
                    {
                        "label": "销售订单",
                        "rule": "/order/order/*",
                        "items": [{
                                "label": "下单",
                                "rule": "/order/order/create"
                            },
                            {
                                "label": "付款记录",
                                "rule": "/order/order/pay-record"
                            },
                            {
                                "label": "取消订单",
                                "rule": "/order/order/cancel"
                            },
                            {
                                "label": "添加来料单号",
                                "rule": "/order/order/add-express"
                            },
                            {
                                "label": "获取物流公司",
                                "rule": "/order/order/express"
                            },
                            {
                                "label": "订单备注",
                                "rule": "/order/order/remark"
                            },
                            {
                                "label": "订单收款",
                                "rule": "/order/order/cash"
                            },
                            {
                                "label": "订单月结",
                                "rule": "/order/order/monthly"
                            },
                            {
                                "label": "设置订单料齐",
                                "rule": "/order/order/all-materials"
                            },
                            {
                                "label": "销售单检索",
                                "rule": "/order/order/list"
                            }
                        ]
                    },
                    {
                        "label": "生产建模",
                        "rule": "/process/process/*",
                        "items": [{
                                "label": "保存工序",
                                "rule": "/process/process/save"
                            },
                            {
                                "label": "保存工艺路线",
                                "rule": "/process/process-route/save"
                            },
                            {
                                "label": "修改工序状态",
                                "rule": "/process/process/update-state"
                            },
                            {
                                "label": "修改工艺路线状态",
                                "rule": "/process/process-route/update-state"
                            },
                            {
                                "label": "工序检索",
                                "rule": "/process/process/index"
                            },
                            {
                                "label": "工序详情",
                                "rule": "/process/process/detail"
                            },
                            {
                                "label": "工艺路线检索",
                                "rule": "/process/process-route/index"
                            },
                            {
                                "label": "工艺路线详情",
                                "rule": "/process/process-route/detail"
                            },
                            {
                                "label": "获取有效的工序",
                                "rule": "/process/process/get-active-process"
                            },
                            {
                                "label": "获取有效的工序(带工位)",
                                "rule": "/process/process/get-active-process-with-station"
                            }
                        ]
                    },
                    {
                        "label": "系统设置",
                        "rule": "/rbac/user-role/*",
                        "items": [{
                                "label": "创建用户",
                                "rule": "/rbac/user-role/create-user"
                            },
                            {
                                "label": "创建用户组",
                                "rule": "/rbac/user-role/create-group"
                            },
                            {
                                "label": " 查看权限组列表",
                                "rule": "/rbac/user-role/read-group"
                            },
                            {
                                "label": "用户停用/启用",
                                "rule": "/rbac/user-role/enable-user"
                            },
                            {
                                "label": "用户列表",
                                "rule": "/rbac/user-role/list"
                            },
                            {
                                "label": " 重置密码",
                                "rule": "/rbac/user-role/reset"
                            },
                            {
                                "label": "权限列表",
                                "rule": "/rbac/user-role/auth-list"
                            }
                        ]
                    },
                    {
                        "label": "排产建模",
                        "rule": "/scheduling/*",
                        "items": [{
                                "label": "保存APS排产规范",
                                "rule": "/scheduling/aps/save"
                            },
                            {
                                "label": "保存排期设置",
                                "rule": "/scheduling/schedule-setting/save"
                            },
                            {
                                "label": "保存生产日历",
                                "rule": "/scheduling/working-calendar-group/save"
                            },
                            {
                                "label": "修改生产日历状态",
                                "rule": "/scheduling/working-calendar-group/update-state"
                            },
                            {
                                "label": "查看APS排产规范",
                                "rule": "/scheduling/aps/detail"
                            },
                            {
                                "label": "查看排期设置",
                                "rule": "/scheduling/schedule-setting/detail"
                            },
                            {
                                "label": "生产日历",
                                "rule": "/scheduling/working-calendar-group/index"
                            },
                            {
                                "label": "生产日历详情",
                                "rule": "/scheduling/working-calendar-group/detail"
                            }
                        ]
                    },
                    {
                        "label": "款式定义",
                        "rule": "/style/detailed/*",
                        "items": [{
                                "label": "加工项款式材料",
                                "rule": "/style/detailed/style-material-form"
                            },
                            {
                                "label": "加工项款式类型",
                                "rule": "/style/detailed/base-form"
                            },
                            {
                                "label": "加工项款式默认表单",
                                "rule": "/style/style/processing"
                            },
                            {
                                "label": "工厂我的款式表单",
                                "rule": "/style/factory/my-style"
                            },
                            {
                                "label": "工厂款式设置",
                                "rule": "/style/factory/set-style-base"
                            },
                            {
                                "label": "工厂添加款式",
                                "rule": "/style/factory/edit-style"
                            },
                            {
                                "label": "工厂添加编辑款式保存",
                                "rule": "/style/factory/save-style"
                            },
                            {
                                "label": "工厂订单产品匹配工艺路线",
                                "rule": "/style/factory/get-process-line"
                            },
                            {
                                "label": "查询窗帘款式",
                                "rule": "/style/style/index"
                            }
                        ]
                    },
                    {
                        "label": "工单管理",
                        "rule": "/task/task/*",
                        "items": [{
                                "label": "加工开始时间",
                                "rule": "/task/task/start"
                            },
                            {
                                "label": "加工结束时间",
                                "rule": "/task/task/end"
                            },
                            {
                                "label": "工单列表",
                                "rule": "/task/task/order-list"
                            },
                            {
                                "label": "工单状态修改",
                                "rule": "/task/task/update-state"
                            },
                            {
                                "label": "工单详情",
                                "rule": "/task/task/order-info"
                            },
                            {
                                "label": "工艺路线",
                                "rule": "/task/task/process-list"
                            },
                            {
                                "label": "待排产列表",
                                "rule": "/task/task/wait-sort"
                            },
                            {
                                "label": "手动排序",
                                "rule": "/task/task/manual-sort"
                            },
                            {
                                "label": "手动料齐",
                                "rule": "/task/task/complete"
                            },
                            {
                                "label": "生产任务",
                                "rule": "/task/task/production"
                            },
                            {
                                "label": "生成加工单",
                                "rule": "/task/task/create-order"
                            },
                            {
                                "label": "自动排序",
                                "rule": "/task/task/auto-sort"
                            },
                            {
                                "label": "获取某工序的空闲时间",
                                "rule": "/task/task/get-process-free-time"
                            }
                        ]
                    },
                    {
                        "label": "用户登录",
                        "rule": "/ucenter/*",
                        "items": [{
                                "label": "发送短信",
                                "rule": "/ucenter/sms"
                            },
                            {
                                "label": "扫码登录获取登录状态",
                                "rule": "/ucenter/auth/auth-state"
                            },
                            {
                                "label": "扫码登录获取链接",
                                "rule": "/ucenter/auth/get-wx-auth"
                            },
                            {
                                "label": "扫码绑定用户",
                                "rule": "/ucenter/auth/wx-bind"
                            },
                            {
                                "label": "获取活跃用户",
                                "rule": "/ucenter/user/active-list"
                            },
                            {
                                "label": "获取行政区域",
                                "rule": "/ucenter/regions"
                            },
                            {
                                "label": "账号密码登录",
                                "rule": "/ucenter/user/login"
                            },
                            {
                                "label": "选择工厂",
                                "rule": "/ucenter/user/select-factory"
                            },
                            {
                                "label": "验证码登录",
                                "rule": "/ucenter/user/login-by-code"
                            },
                            {
                                "label": "添加用户",
                                "rule": "/traveller/traveller/form"
                            }
                        ]
                    }
                ]

                this.cities = data.map(v => ({ 
                    ...v,
                    checkAll: false,
                    allRule: v.items.map(i => i.rule)
                }))
            },
            //判断是否是不确定    条件1：当前item.items里至少有一个选上   条件2：当前item.items里至少有一个没有被选上
            itemIndeterminate(item){
                return item.allRule.some(v => this.checkedCities.indexOf(v) > -1) && !item.allRule.every(v => this.checkedCities.indexOf(v) > -1)
            },
            handleCheckAllChange(val, item){
                const filterArr = this.checkedCities.filter(v => item.allRule.indexOf(v) === -1);
                this.checkedCities = val ? filterArr.concat(item.allRule) : filterArr
            },
            aa(){
                console.log(this.checkedCities)
            }
        },
        created() {
            this.getList()
        }
    }
</script>

2.点击aaaa 所有单独数组链接 {"label": "客户查询","rule": "/customer/customer/index" },放到一个数组里面

<style scoped>

</style>

<template>
    <el-form label-width="200px">
        <el-button @click="aa">点击我打印结果</el-button>
        <el-form-item v-for="item in cities" :key="item.rule" style="border-top: 1px solid red;">
            <el-checkbox @change="val => handleCheckAllChange(val, item)" 
                         :indeterminate="itemIndeterminate(item)" 
                         v-model="item.checkAll"
            >{{item.label}}</el-checkbox>
            <el-checkbox-group v-model="checkedCities">
                <el-checkbox v-for="city in item.items" :key="city.rule" :label="city">{{city.label}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                cities: [],
                checkedCities: []
            }
        },
        methods: {
            getList() {
                // 假设是后台获取的数据
                const data = [{
                        "label": "客户管理",
                        "rule": "/customer/customer/*",
                        "items": [{
                                "label": "修改工艺标准",
                                "rule": "/customer/customer/update-process-standard"
                            },
                            {
                                "label": "客户保存",
                                "rule": "/customer/customer/save"
                            },
                            {
                                "label": "客户查询",
                                "rule": "/customer/customer/index"
                            },
                            {
                                "label": "更新客户状态",
                                "rule": "/customer/customer/update-state"
                            },
                            {
                                "label": "更新计价模型",
                                "rule": "/customer/customer/update-offer"
                            },
                            {
                                "label": "查看客户",
                                "rule": "/customer/customer/detail"
                            },
                            {
                                "label": "查看工艺标准",
                                "rule": "/customer/customer/process-standard"
                            },
                            {
                                "label": "查看计价模型",
                                "rule": "/customer/customer/get-offer"
                            }
                        ]
                    },
                    {
                        "label": "工厂建模",
                        "rule": "/factory/factory/*",
                        "items": [{
                                "label": "产线列表",
                                "rule": "/factory/factory/line-list"
                            },
                            {
                                "label": "产线启用/停用",
                                "rule": "/factory/factory/enable-line"
                            },
                            {
                                "label": "修改工厂信息",
                                "rule": "/factory/factory/update"
                            },
                            {
                                "label": "关联工位",
                                "rule": "/factory/factory/relate-pos"
                            },
                            {
                                "label": "创建产线",
                                "rule": "/factory/factory/create-line"
                            },
                            {
                                "label": "创建工位",
                                "rule": "/factory/factory/create-pos"
                            },
                            {
                                "label": "创建工厂",
                                "rule": "/factory/factory/create-factory"
                            },
                            {
                                "label": "工位启用/停用",
                                "rule": "/factory/factory/enable-pos"
                            },
                            {
                                "label": "工位列表",
                                "rule": "/factory/factory/pos-list"
                            },
                            {
                                "label": "工厂信息",
                                "rule": "/factory/factory/factory-info"
                            },
                            {
                                "label": "工厂列表",
                                "rule": "/factory/factory/list"
                            },
                            {
                                "label": "工厂启用/停用",
                                "rule": "/factory/factory/enable"
                            },
                            {
                                "label": "工厂树状图",
                                "rule": "/factory/factory/tree"
                            },
                            {
                                "label": "所属工位列表",
                                "rule": "/factory/factory/belong-station"
                            },
                            {
                                "label": "查看产线",
                                "rule": "/factory/factory/line-info"
                            },
                            {
                                "label": "查看工位",
                                "rule": "/factory/factory/pos-info"
                            },
                            {
                                "label": "查看设备",
                                "rule": "/factory/factory/device-info"
                            },
                            {
                                "label": "添加设备",
                                "rule": "/factory/factory/create-device"
                            },
                            {
                                "label": "设备列表",
                                "rule": "/factory/factory/device-list"
                            }
                        ]
                    },
                    {
                        "label": "销售订单",
                        "rule": "/order/order/*",
                        "items": [{
                                "label": "下单",
                                "rule": "/order/order/create"
                            },
                            {
                                "label": "付款记录",
                                "rule": "/order/order/pay-record"
                            },
                            {
                                "label": "取消订单",
                                "rule": "/order/order/cancel"
                            },
                            {
                                "label": "添加来料单号",
                                "rule": "/order/order/add-express"
                            },
                            {
                                "label": "获取物流公司",
                                "rule": "/order/order/express"
                            },
                            {
                                "label": "订单备注",
                                "rule": "/order/order/remark"
                            },
                            {
                                "label": "订单收款",
                                "rule": "/order/order/cash"
                            },
                            {
                                "label": "订单月结",
                                "rule": "/order/order/monthly"
                            },
                            {
                                "label": "设置订单料齐",
                                "rule": "/order/order/all-materials"
                            },
                            {
                                "label": "销售单检索",
                                "rule": "/order/order/list"
                            }
                        ]
                    },
                    {
                        "label": "生产建模",
                        "rule": "/process/process/*",
                        "items": [{
                                "label": "保存工序",
                                "rule": "/process/process/save"
                            },
                            {
                                "label": "保存工艺路线",
                                "rule": "/process/process-route/save"
                            },
                            {
                                "label": "修改工序状态",
                                "rule": "/process/process/update-state"
                            },
                            {
                                "label": "修改工艺路线状态",
                                "rule": "/process/process-route/update-state"
                            },
                            {
                                "label": "工序检索",
                                "rule": "/process/process/index"
                            },
                            {
                                "label": "工序详情",
                                "rule": "/process/process/detail"
                            },
                            {
                                "label": "工艺路线检索",
                                "rule": "/process/process-route/index"
                            },
                            {
                                "label": "工艺路线详情",
                                "rule": "/process/process-route/detail"
                            },
                            {
                                "label": "获取有效的工序",
                                "rule": "/process/process/get-active-process"
                            },
                            {
                                "label": "获取有效的工序(带工位)",
                                "rule": "/process/process/get-active-process-with-station"
                            }
                        ]
                    },
                    {
                        "label": "系统设置",
                        "rule": "/rbac/user-role/*",
                        "items": [{
                                "label": "创建用户",
                                "rule": "/rbac/user-role/create-user"
                            },
                            {
                                "label": "创建用户组",
                                "rule": "/rbac/user-role/create-group"
                            },
                            {
                                "label": " 查看权限组列表",
                                "rule": "/rbac/user-role/read-group"
                            },
                            {
                                "label": "用户停用/启用",
                                "rule": "/rbac/user-role/enable-user"
                            },
                            {
                                "label": "用户列表",
                                "rule": "/rbac/user-role/list"
                            },
                            {
                                "label": " 重置密码",
                                "rule": "/rbac/user-role/reset"
                            },
                            {
                                "label": "权限列表",
                                "rule": "/rbac/user-role/auth-list"
                            }
                        ]
                    },
                    {
                        "label": "排产建模",
                        "rule": "/scheduling/*",
                        "items": [{
                                "label": "保存APS排产规范",
                                "rule": "/scheduling/aps/save"
                            },
                            {
                                "label": "保存排期设置",
                                "rule": "/scheduling/schedule-setting/save"
                            },
                            {
                                "label": "保存生产日历",
                                "rule": "/scheduling/working-calendar-group/save"
                            },
                            {
                                "label": "修改生产日历状态",
                                "rule": "/scheduling/working-calendar-group/update-state"
                            },
                            {
                                "label": "查看APS排产规范",
                                "rule": "/scheduling/aps/detail"
                            },
                            {
                                "label": "查看排期设置",
                                "rule": "/scheduling/schedule-setting/detail"
                            },
                            {
                                "label": "生产日历",
                                "rule": "/scheduling/working-calendar-group/index"
                            },
                            {
                                "label": "生产日历详情",
                                "rule": "/scheduling/working-calendar-group/detail"
                            }
                        ]
                    },
                    {
                        "label": "款式定义",
                        "rule": "/style/detailed/*",
                        "items": [{
                                "label": "加工项款式材料",
                                "rule": "/style/detailed/style-material-form"
                            },
                            {
                                "label": "加工项款式类型",
                                "rule": "/style/detailed/base-form"
                            },
                            {
                                "label": "加工项款式默认表单",
                                "rule": "/style/style/processing"
                            },
                            {
                                "label": "工厂我的款式表单",
                                "rule": "/style/factory/my-style"
                            },
                            {
                                "label": "工厂款式设置",
                                "rule": "/style/factory/set-style-base"
                            },
                            {
                                "label": "工厂添加款式",
                                "rule": "/style/factory/edit-style"
                            },
                            {
                                "label": "工厂添加编辑款式保存",
                                "rule": "/style/factory/save-style"
                            },
                            {
                                "label": "工厂订单产品匹配工艺路线",
                                "rule": "/style/factory/get-process-line"
                            },
                            {
                                "label": "查询窗帘款式",
                                "rule": "/style/style/index"
                            }
                        ]
                    },
                    {
                        "label": "工单管理",
                        "rule": "/task/task/*",
                        "items": [{
                                "label": "加工开始时间",
                                "rule": "/task/task/start"
                            },
                            {
                                "label": "加工结束时间",
                                "rule": "/task/task/end"
                            },
                            {
                                "label": "工单列表",
                                "rule": "/task/task/order-list"
                            },
                            {
                                "label": "工单状态修改",
                                "rule": "/task/task/update-state"
                            },
                            {
                                "label": "工单详情",
                                "rule": "/task/task/order-info"
                            },
                            {
                                "label": "工艺路线",
                                "rule": "/task/task/process-list"
                            },
                            {
                                "label": "待排产列表",
                                "rule": "/task/task/wait-sort"
                            },
                            {
                                "label": "手动排序",
                                "rule": "/task/task/manual-sort"
                            },
                            {
                                "label": "手动料齐",
                                "rule": "/task/task/complete"
                            },
                            {
                                "label": "生产任务",
                                "rule": "/task/task/production"
                            },
                            {
                                "label": "生成加工单",
                                "rule": "/task/task/create-order"
                            },
                            {
                                "label": "自动排序",
                                "rule": "/task/task/auto-sort"
                            },
                            {
                                "label": "获取某工序的空闲时间",
                                "rule": "/task/task/get-process-free-time"
                            }
                        ]
                    },
                    {
                        "label": "用户登录",
                        "rule": "/ucenter/*",
                        "items": [{
                                "label": "发送短信",
                                "rule": "/ucenter/sms"
                            },
                            {
                                "label": "扫码登录获取登录状态",
                                "rule": "/ucenter/auth/auth-state"
                            },
                            {
                                "label": "扫码登录获取链接",
                                "rule": "/ucenter/auth/get-wx-auth"
                            },
                            {
                                "label": "扫码绑定用户",
                                "rule": "/ucenter/auth/wx-bind"
                            },
                            {
                                "label": "获取活跃用户",
                                "rule": "/ucenter/user/active-list"
                            },
                            {
                                "label": "获取行政区域",
                                "rule": "/ucenter/regions"
                            },
                            {
                                "label": "账号密码登录",
                                "rule": "/ucenter/user/login"
                            },
                            {
                                "label": "选择工厂",
                                "rule": "/ucenter/user/select-factory"
                            },
                            {
                                "label": "验证码登录",
                                "rule": "/ucenter/user/login-by-code"
                            },
                            {
                                "label": "添加用户",
                                "rule": "/traveller/traveller/form"
                            }
                        ]
                    }
                ]

                this.cities = data.map(v => ({ 
                    ...v,
                    checkAll: false,
                }))
            },
            //判断是否是不确定    条件1：当前item.items里至少有一个选上   条件2：当前item.items里至少有一个没有被选上
            itemIndeterminate(item){
                return item.items.some(v => this.checkedCities.indexOf(v) > -1) && !item.items.every(v => this.checkedCities.indexOf(v) > -1)
            },
            handleCheckAllChange(val, item){
                const filterArr = this.checkedCities.filter(v => item.items.indexOf(v) === -1);
                this.checkedCities = val ? filterArr.concat(item.items) : filterArr
            },
            aa(){
                console.log(this.checkedCities)
            }
        },
        created() {
            this.getList()
        }
    }
</script>

3，数据格式变成跟data的数据格式一样的数据，数组套数组 

<style scoped>

</style>

<template>
    <el-form label-width="200px">
        <el-button @click="aa">点击我打印结果</el-button>
        <el-form-item v-for="item in cities" :key="item.rule" style="border-top: 1px solid red;">
            <el-checkbox @change="val => handleCheckAllChange(val, item)" 
                         :indeterminate="itemIndeterminate(item)" 
                         v-model="item.checkAll"
            >{{item.label}}</el-checkbox>
            <el-checkbox-group v-model="checkedCities">
                <el-checkbox v-for="city in item.items" :key="city.rule" :label="city">{{city.label}}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                cities: [],
                checkedCities: []
            }
        },
        methods: {
            getList() {
                // 假设是后台获取的数据
                const data = [{
                        "label": "客户管理",
                        "rule": "/customer/customer/*",
                        "items": [{
                                "label": "修改工艺标准",
                                "rule": "/customer/customer/update-process-standard"
                            },
                            {
                                "label": "客户保存",
                                "rule": "/customer/customer/save"
                            },
                            {
                                "label": "客户查询",
                                "rule": "/customer/customer/index"
                            },
                            {
                                "label": "更新客户状态",
                                "rule": "/customer/customer/update-state"
                            },
                            {
                                "label": "更新计价模型",
                                "rule": "/customer/customer/update-offer"
                            },
                            {
                                "label": "查看客户",
                                "rule": "/customer/customer/detail"
                            },
                            {
                                "label": "查看工艺标准",
                                "rule": "/customer/customer/process-standard"
                            },
                            {
                                "label": "查看计价模型",
                                "rule": "/customer/customer/get-offer"
                            }
                        ]
                    },
                    {
                        "label": "工厂建模",
                        "rule": "/factory/factory/*",
                        "items": [{
                                "label": "产线列表",
                                "rule": "/factory/factory/line-list"
                            },
                            {
                                "label": "产线启用/停用",
                                "rule": "/factory/factory/enable-line"
                            },
                            {
                                "label": "修改工厂信息",
                                "rule": "/factory/factory/update"
                            },
                            {
                                "label": "关联工位",
                                "rule": "/factory/factory/relate-pos"
                            },
                            {
                                "label": "创建产线",
                                "rule": "/factory/factory/create-line"
                            },
                            {
                                "label": "创建工位",
                                "rule": "/factory/factory/create-pos"
                            },
                            {
                                "label": "创建工厂",
                                "rule": "/factory/factory/create-factory"
                            },
                            {
                                "label": "工位启用/停用",
                                "rule": "/factory/factory/enable-pos"
                            },
                            {
                                "label": "工位列表",
                                "rule": "/factory/factory/pos-list"
                            },
                            {
                                "label": "工厂信息",
                                "rule": "/factory/factory/factory-info"
                            },
                            {
                                "label": "工厂列表",
                                "rule": "/factory/factory/list"
                            },
                            {
                                "label": "工厂启用/停用",
                                "rule": "/factory/factory/enable"
                            },
                            {
                                "label": "工厂树状图",
                                "rule": "/factory/factory/tree"
                            },
                            {
                                "label": "所属工位列表",
                                "rule": "/factory/factory/belong-station"
                            },
                            {
                                "label": "查看产线",
                                "rule": "/factory/factory/line-info"
                            },
                            {
                                "label": "查看工位",
                                "rule": "/factory/factory/pos-info"
                            },
                            {
                                "label": "查看设备",
                                "rule": "/factory/factory/device-info"
                            },
                            {
                                "label": "添加设备",
                                "rule": "/factory/factory/create-device"
                            },
                            {
                                "label": "设备列表",
                                "rule": "/factory/factory/device-list"
                            }
                        ]
                    },
                    {
                        "label": "销售订单",
                        "rule": "/order/order/*",
                        "items": [{
                                "label": "下单",
                                "rule": "/order/order/create"
                            },
                            {
                                "label": "付款记录",
                                "rule": "/order/order/pay-record"
                            },
                            {
                                "label": "取消订单",
                                "rule": "/order/order/cancel"
                            },
                            {
                                "label": "添加来料单号",
                                "rule": "/order/order/add-express"
                            },
                            {
                                "label": "获取物流公司",
                                "rule": "/order/order/express"
                            },
                            {
                                "label": "订单备注",
                                "rule": "/order/order/remark"
                            },
                            {
                                "label": "订单收款",
                                "rule": "/order/order/cash"
                            },
                            {
                                "label": "订单月结",
                                "rule": "/order/order/monthly"
                            },
                            {
                                "label": "设置订单料齐",
                                "rule": "/order/order/all-materials"
                            },
                            {
                                "label": "销售单检索",
                                "rule": "/order/order/list"
                            }
                        ]
                    },
                    {
                        "label": "生产建模",
                        "rule": "/process/process/*",
                        "items": [{
                                "label": "保存工序",
                                "rule": "/process/process/save"
                            },
                            {
                                "label": "保存工艺路线",
                                "rule": "/process/process-route/save"
                            },
                            {
                                "label": "修改工序状态",
                                "rule": "/process/process/update-state"
                            },
                            {
                                "label": "修改工艺路线状态",
                                "rule": "/process/process-route/update-state"
                            },
                            {
                                "label": "工序检索",
                                "rule": "/process/process/index"
                            },
                            {
                                "label": "工序详情",
                                "rule": "/process/process/detail"
                            },
                            {
                                "label": "工艺路线检索",
                                "rule": "/process/process-route/index"
                            },
                            {
                                "label": "工艺路线详情",
                                "rule": "/process/process-route/detail"
                            },
                            {
                                "label": "获取有效的工序",
                                "rule": "/process/process/get-active-process"
                            },
                            {
                                "label": "获取有效的工序(带工位)",
                                "rule": "/process/process/get-active-process-with-station"
                            }
                        ]
                    },
                    {
                        "label": "系统设置",
                        "rule": "/rbac/user-role/*",
                        "items": [{
                                "label": "创建用户",
                                "rule": "/rbac/user-role/create-user"
                            },
                            {
                                "label": "创建用户组",
                                "rule": "/rbac/user-role/create-group"
                            },
                            {
                                "label": " 查看权限组列表",
                                "rule": "/rbac/user-role/read-group"
                            },
                            {
                                "label": "用户停用/启用",
                                "rule": "/rbac/user-role/enable-user"
                            },
                            {
                                "label": "用户列表",
                                "rule": "/rbac/user-role/list"
                            },
                            {
                                "label": " 重置密码",
                                "rule": "/rbac/user-role/reset"
                            },
                            {
                                "label": "权限列表",
                                "rule": "/rbac/user-role/auth-list"
                            }
                        ]
                    },
                    {
                        "label": "排产建模",
                        "rule": "/scheduling/*",
                        "items": [{
                                "label": "保存APS排产规范",
                                "rule": "/scheduling/aps/save"
                            },
                            {
                                "label": "保存排期设置",
                                "rule": "/scheduling/schedule-setting/save"
                            },
                            {
                                "label": "保存生产日历",
                                "rule": "/scheduling/working-calendar-group/save"
                            },
                            {
                                "label": "修改生产日历状态",
                                "rule": "/scheduling/working-calendar-group/update-state"
                            },
                            {
                                "label": "查看APS排产规范",
                                "rule": "/scheduling/aps/detail"
                            },
                            {
                                "label": "查看排期设置",
                                "rule": "/scheduling/schedule-setting/detail"
                            },
                            {
                                "label": "生产日历",
                                "rule": "/scheduling/working-calendar-group/index"
                            },
                            {
                                "label": "生产日历详情",
                                "rule": "/scheduling/working-calendar-group/detail"
                            }
                        ]
                    },
                    {
                        "label": "款式定义",
                        "rule": "/style/detailed/*",
                        "items": [{
                                "label": "加工项款式材料",
                                "rule": "/style/detailed/style-material-form"
                            },
                            {
                                "label": "加工项款式类型",
                                "rule": "/style/detailed/base-form"
                            },
                            {
                                "label": "加工项款式默认表单",
                                "rule": "/style/style/processing"
                            },
                            {
                                "label": "工厂我的款式表单",
                                "rule": "/style/factory/my-style"
                            },
                            {
                                "label": "工厂款式设置",
                                "rule": "/style/factory/set-style-base"
                            },
                            {
                                "label": "工厂添加款式",
                                "rule": "/style/factory/edit-style"
                            },
                            {
                                "label": "工厂添加编辑款式保存",
                                "rule": "/style/factory/save-style"
                            },
                            {
                                "label": "工厂订单产品匹配工艺路线",
                                "rule": "/style/factory/get-process-line"
                            },
                            {
                                "label": "查询窗帘款式",
                                "rule": "/style/style/index"
                            }
                        ]
                    },
                    {
                        "label": "工单管理",
                        "rule": "/task/task/*",
                        "items": [{
                                "label": "加工开始时间",
                                "rule": "/task/task/start"
                            },
                            {
                                "label": "加工结束时间",
                                "rule": "/task/task/end"
                            },
                            {
                                "label": "工单列表",
                                "rule": "/task/task/order-list"
                            },
                            {
                                "label": "工单状态修改",
                                "rule": "/task/task/update-state"
                            },
                            {
                                "label": "工单详情",
                                "rule": "/task/task/order-info"
                            },
                            {
                                "label": "工艺路线",
                                "rule": "/task/task/process-list"
                            },
                            {
                                "label": "待排产列表",
                                "rule": "/task/task/wait-sort"
                            },
                            {
                                "label": "手动排序",
                                "rule": "/task/task/manual-sort"
                            },
                            {
                                "label": "手动料齐",
                                "rule": "/task/task/complete"
                            },
                            {
                                "label": "生产任务",
                                "rule": "/task/task/production"
                            },
                            {
                                "label": "生成加工单",
                                "rule": "/task/task/create-order"
                            },
                            {
                                "label": "自动排序",
                                "rule": "/task/task/auto-sort"
                            },
                            {
                                "label": "获取某工序的空闲时间",
                                "rule": "/task/task/get-process-free-time"
                            }
                        ]
                    },
                    {
                        "label": "用户登录",
                        "rule": "/ucenter/*",
                        "items": [{
                                "label": "发送短信",
                                "rule": "/ucenter/sms"
                            },
                            {
                                "label": "扫码登录获取登录状态",
                                "rule": "/ucenter/auth/auth-state"
                            },
                            {
                                "label": "扫码登录获取链接",
                                "rule": "/ucenter/auth/get-wx-auth"
                            },
                            {
                                "label": "扫码绑定用户",
                                "rule": "/ucenter/auth/wx-bind"
                            },
                            {
                                "label": "获取活跃用户",
                                "rule": "/ucenter/user/active-list"
                            },
                            {
                                "label": "获取行政区域",
                                "rule": "/ucenter/regions"
                            },
                            {
                                "label": "账号密码登录",
                                "rule": "/ucenter/user/login"
                            },
                            {
                                "label": "选择工厂",
                                "rule": "/ucenter/user/select-factory"
                            },
                            {
                                "label": "验证码登录",
                                "rule": "/ucenter/user/login-by-code"
                            },
                            {
                                "label": "添加用户",
                                "rule": "/traveller/traveller/form"
                            }
                        ]
                    }
                ]

                this.cities = data.map(v => ({ 
                    ...v,
                    checkAll: false,
                }))
            },
            //判断是否是不确定    条件1：当前item.items里至少有一个选上   条件2：当前item.items里至少有一个没有被选上
            itemIndeterminate(item){
                return item.items.some(v => this.checkedCities.indexOf(v) > -1) && !item.items.every(v => this.checkedCities.indexOf(v) > -1)
            },
            handleCheckAllChange(val, item){
                const filterArr = this.checkedCities.filter(v => item.items.indexOf(v) === -1);
                this.checkedCities = val ? filterArr.concat(item.items) : filterArr
            },
            aa(){
            	let result = this.cities.map(v => ({
                    label: v.label,
                    rule: v.rule,
                    items: v.items.filter(v => this.checkedCities.indexOf(v) > -1)
                })).filter(v => v.items.length)
                console.log(result)
            }
        },
        created() {
            this.getList()
        }
    }
</script>

4 操作回显    数据格式为所有选中放在一个数组中

                    let all = [];
		            this.cities.forEach(v => all.push(...v.items));
		            const values = row.limit;
		            this.checkedCities = all.filter(v => values.find(item => item.rule == v.rule))

 

不会么么哒
关注
专栏目录
vue3 - elementPlus全国城市列表选择器，提供省市区联动选择器、选择地址省市区级联、复选框tree树状省份全部列出来勾选，支持数据懒加载节点动态加载（附带全国省市区县乡镇村json数据）
高级前端工程师
09-22 3228
vue3，element-plus，Element Plus级联和树形省市区，组件tree实现省市多级联动，vue3省市区三级联动选择器，选择地址，选择地区，选择多个省市区、批量选择城市，选择当前位置，省市区数据懒加载，动态加载城市数据，插件，地址选择器组件，城市选择器，省市区联动选择，Tree树组件列出省名称，树结构的城市列表，vue3省市区tree树形级联，全国省份列表，展开下级多级，vue3 element实现省市区选择联动，地区选择器，把所有省份都展示出来，选择多个城市，省市区三级联动选择器，省市区
vue+element 循环多组 checkbox实现
老菜鸟ios学习足迹
01-11 938
【代码】vue+element 循环多组 checkbox实现。
Element复选框编辑回显问题
HEWNCP的博客
09-17 2079
由于项目需要，碰到复选框编辑回显问题，因为数据格式与官网格式不同，所以试了许多次未果，百度上的答案也千奇百怪，后来经过公司大佬点拨实现了功能，所以记录一下，希望可以帮助同样遇到坑的朋友。 图中数据为表中点击某一行的传入编辑页中的数据 这是我根据后端返参类型写的假数据 因为element中直接使用字符串与项目数据不同，将数据改为对象回显时走了许多坑 图中ckecks为当前复选框中所有数据，label指向id值，key值为下标 disabled因为我项目中回显后选中不可编辑，如果没用这种效果可不写input框
Element-UI下拉多选框回显
最新发布
python0328的博客
09-04 245
【代码】Element-UI下拉多选框回显。
ElementUi Table复选框回显
韩旭不会敲代码吧的博客
06-03 616
ElementUi Table复选框回显
elememt ui 表格复选框回显
wgb0409的博客
12-17 546
<el-table ref="table" :data="tableData" :row-key="getRowKey"> <el-table-column type="selection" width="55" :reserve-selection="true"> </el-table-column> </el-table> getRowKey(row) { return row.id; }, //获取到...
elementUI表格复选框进行数据回显
做一个有知识的流氓
04-23 8839
【代码】elementUI表格复选框进行数据回显。
Element-ui框架checkbox复选框全选加回显功能
靓仔豪吖的博客
04-23 1924
Element-ui框架checkbox复选框全选加回显功能 <template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选</el-checkbox> <el-checkbox-group v-model="checkedCities" @c
vue+element-ui树形表格+复选框（实现复选框的各种效果）
Tony_ET的博客
01-25 4273
需求 项目的需求是给角色分配菜单，菜单会有子集，所以后台反给我的是带children的树形数据，但是添加的时候可能是一次性选很多的菜单，多选就不能直接用elemengt自带的多选，所以用了表格树形和复选框的组合，复选框用了插槽，完成了一些列的逻辑 代码块 表格部分 视图层 table中加入树形 :tree-props="{children: 'children'}" 插入两个复选框，一个是表头的，一个是表身<el-checkbox>绑定对应的v-model，还有对应的事件，后边写对应的逻辑 &l
elementUI的el-table多页面选checkbox回显问题
kuro桑的博客
05-08 5270
关于el-table的多选，相信只要做过项目的朋友都会用过，这其中有一个坑，是很大概率会踩到的，就是第一页选中了之后，切到第二页选择完之后，切换回第一页发现第一页选择的不见了，怎么办？？？ 这个坑，老实说不难，但由于经常碰到，我总结了一下，大概由两种方法。 1. 利用 reserve-selection与row-key结合 使用方法： 1）在表格加上属性 :row-key="(row) =&g...
elementUI表格里树形结构嵌套复选框全选全不选功能及子集没全选是父级不勾选子集全选后父级自动勾选
weixin_48050571的博客
05-27 2785
第一次在CSDN上面发表文章，还有点小激动。废话不多说，先看一下效果图 全部选中的时候，勾选父级子集全部选中 取消子集的选中，父级默认也取消 然后就是代码了，先添加checkbox标签，定义事件 由于后端数据里面没有给我返回参数所以，自己处理了一下参数结构，添加了checked和parent两个属性 由于别的地方也用到了请求回来的数据，所以自己深拷贝了一下获取到的数据到新的数组里面进行属性添加，listdata就是自己请求接口获取的数据，进行递归，添加了两个属性赋值给this.listdatapron
循环渲染多个复选框checkbox
weixin_60353902的博客
10-30 413
4. 注意：isChecked的值为[ ]空数组。因为多个复选框的选中状态也不一样，需要接收多个状态，多个要用数组的形式接收。有些人使用true/false，结果一点击复选框，就会全选，全部都是一个状态。1. 定义一个div容器，里面包含多个复选框，复选框的数据来源是后台数据，为数组。主要展示通过后台数据，循环渲染多个复选框，并解决同时选中和同时取消的问题。3. 通过Input标签，获取复选框的选中状态，使用v-model。2. 在div容器标签中，接收该数组, v-for循环渲染。
vue+elementUI 添加多个可以全选的多选框
Start2019
01-05 3705
1. vue+elementUI 动态生成多个可以全选的CheckBox多选框 2. indeterminate 状态 3. 实现全选的复选框 多选框
关于ElementUI的CheckBox多选框数据回显
JackMa的博客
12-23 6024
获取的数据值进行匹配，如果相同就会数据回显，显示已选。因为ElementUI已经封装好了，会自动匹配。数据需要和label标签值相同才能数据回显。例如上图，需要回显已选的数据。点击分配，则会显示回显的数据。
element Table实现循环表格、跨表格复选框功能实现
royya_buli的博客
12-09 3696
element Table实现循环表格、跨表格复选框功能实现
vue + element 复选框
lele的博客
05-23 1064
<el-checkbox-group v-model="array" class='checkGroup' > <el-checkbox v-for="item in scopeList" :label="item.id" :key="item.id" class="checktop">{{item.description}}</el-checkbox&g...
elementui中el-table中selection框选中的回显（带有expand的table）
qq_45750213的博客
01-17 2427
el-table-column show-overflow-tooltip prop="chemicalName align="center label="化 学品名称">//toggleRowExpansion展开扩展按钮，展开后会调用handleExpandChange方法。选中的项自动展开，点击新增按钮打开dialog并进行选中项的展开和选中回显。-- 表格数据的分页的功能 -->//chooseData可选的列表数据。//tableData选中项集合。// 备份一下选中数据。
el-dialog + el-table 复选框回显
2301_76861208的博客
02-02 648
在 Element UI 的 el-dialog 中，想要实现 el-table 的复选框回显（即在对话框打开时显示之前已经选中的项），需要在对话框打开之前保存选中的状态，并在打开对话框时根据这些状态来设置复选框的选中状态。
vue 循环勾选框,Vue + element 实现多选框组并保存已选id集合
weixin_31937605的博客
03-27 1598
Vue + element 实现列表复选框并保存已选id集合1.引用element组件多选框组，checkList为提交后台数据得数组，tableData为数据源2.初始化tableData集合3.循环遍历需要显示得值4.在多选框组上添加chang事件tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},...
el-checkbox复选框的回显
03-26
el-checkbox复选框的回显可以通过v-model绑定一个Boolean类型的值来实现。当复选框被选中时，该Boolean值为true；当复选框未被选中时，该Boolean值为false。 在组件的数据源中，可以设置一个布尔值类型的变量，如isChecked，用于控制复选框是否被选中。同时，在el-checkbox标签上，v-model绑定该变量。 ``` <template> <el-checkbox v-model="isChecked">选项一</el-checkbox> </template> <script> export default { data() { return { isChecked: true } } } </script> ``` 当用户点击复选框时，isChecked的值会自动更新，反映复选框的当前状态。可以将isChecked的值保存到组件的数据源中，以便之后再次使用时，能够正确地回显复选框的状态。 ``` <template> <div> <el-checkbox v-model="isChecked">选项一</el-checkbox> <el-button @click="saveData">保存</el-button> </div> </template> <script> export default { data() { return { isChecked: false, formData: {} } }, methods: { saveData() { this.formData.isChecked = this.isChecked // 保存表单数据 } } } </script> ```
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值