<checkbox-group placeholder="请输入审批状态" v-model="model.approveStatus"> <checkbox></checkbox> </checkbox-group> 选中状态
时间: 2025-06-16 07:31:32 浏览: 11
### 设置或获取 `checkbox-group` 组件中选中状态的值
在 Vue.js 使用 Element UI 的 `el-checkbox-group` 组件时,通过 `v-model` 可以方便地实现双向数据绑定来管理复选框的状态。具体来说:
对于 `el-checkbox-group` 而言,其内部可以包含多个 `el-checkbox` 子组件,并且这些子组件会被视为一组。为了使这组复选框能够正常工作并反映用户的交互行为,在父级标签 `<el-checkbox-group>` 上应该使用 `v-model` 来绑定一个数组类型的变量[^3]。
当页面加载完成之后,如果希望某些特定项被预先勾选,则可以在初始化该数组时就加入相应的值;而每当用户改变选择(即点击某个复选框),这个数组也会自动更新以保持同步[^1]。
下面是一个简单的例子展示如何设置初始选中状态以及监听变化后的处理逻辑:
```html
<template>
<div class="example">
<!-- 定义了一个名为 selectedOptions 的响应式属性用于存储当前的选择 -->
<el-checkbox-group v-model="selectedOptions" @change="handleChange">
<el-checkbox label="Option A"></el-checkbox>
<el-checkbox label="Option B"></el-checkbox>
<el-checkbox label="Option C"></el-checkbox>
</el-checkbox-group>
<p>Selected options are: {{ selectedOptions }}</p>
</div>
</template>
<script>
export default {
name: 'CheckboxExample',
data() {
return {
// 初始化已选中的项目列表
selectedOptions: ['Option A']
};
},
methods: {
handleChange(value) {
console.log('Current value:', value);
}
}
};
</script>
```
在这个实例里,`selectedOptions` 数组用来保存所有已被选中的选项名称字符串。由于绑定了 `@change` 事件处理器函数 `handleChange()` ,因此每当地址发生变化时都会触发此方法并将最新的地址作为参数传递给它以便进一步操作[^2]。
此外需要注意的是,确保所提供的 `label` 属性值与 `v-model` 所指向的数据结构相匹配非常重要。例如,如果是对象形式的话就需要特别指定键名来进行比较判断[^4]。
最后一点值得注意的地方在于动态修改 `v-model` 对应的数据源时可能需要调用 `$set` 方法来通知视图层重新渲染,从而保证界面显示正确无误[^5]。
阅读全文
相关推荐








<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
学习计划表
<form>
学习科目<input type="text"
class="form-control" placeholder="请输入学习科目">
学习内容<textarea
class="form-control" placeholder="请输入学习内容" style="height: 32px;"></textarea>
学习地点<select
class="form-select form-select-sm">
<option value="自习室">自习室</option>
<option value="图书馆">图书馆</option>
<option value="宿舍">宿舍</option>
</select>
<button type="submit" class="btn btn-primary">添加</button>
</form>
序号
学习科目
学习内容
学习地点
完成状态
操作
1
Vue.js前端实战开发
学习指令,例如v-if、v-for、v-model等
自习室
<input class="form-check-input" type="checkbox" role="switch"
id="cb1"><label class="form-check-label" for="cb1">未完成</label>
删除
2
1
自习室
<input class="form-check-input" type="checkbox" role="switch"
id="cb2"><label class="form-check-label" for="cb2">未完成</label>
删除
</body>



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.bg-f4f6f7 {
background-color: #f4f6f7;
}
</style>
</head>
<body>
Æon
管理员
首页
用户管理
封禁/解除用户
用户列表
用户行为记录
歌手管理
封禁/解封歌手
歌手歌曲
歌曲内容管理
歌曲收藏
评论管理
歌曲信息
歌单管理
社区管理
帖子审核
帖子发布
举报处理
数据分析
播放量分析
用户分析
管理员管理
系统管理
<template id="homeTpl" class="">
首页
用户数量
新增用户数{{usernum}}
总用户数{{totalusernum}}
歌手数量
总歌手数{{singernum}}
代办事项
无
快捷入口
用户
用户
用户
用户
用户
用户
用户
用户
访问统计
</template>
<template id="usersTpl">
首页->用户
用户名:
<input placeholder="查询内容" class="pt-2 pb-2 rounded" />
查询
新增
删除
选择
索引
用户名
头像
性别
账号
操作
</template>
<template id="singerTpl">
首页->歌手
歌手/歌曲:
<input placeholder="查询内容" class="pt-2 pb-2 rounded" />
查询
新增
删除
<input type="checkbox" id="selectAll" class="checkbox">
索引
歌手
照片
性别
歌曲
操作
加载中...
</template>
<template id="gedanTpl">
首页->歌单
歌单:
<input placeholder="查询内容" class="pt-2 pb-2 rounded" />
查询
新增
删除
索引
歌曲名称
海报
歌曲分类
歌手
视频
操作
加载中...
</template>
<template id="shequTpl">
首页->社区
歌单:
<input placeholder="查询内容" class="pt-2 pb-2 rounded" />
查询
新增
删除
<input type="checkbox" id="selectAll">
编号
帖子标题
发布人
发布时间
更新时间
审核时间
状态
操作
加载中...
</template>
<template id="shujuTpl">
播放量
平台总播放量分析
歌手播放量
当前趋势分析
</template>
<template id="guanliTpl">
管理员管理
管理员
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="js/cebianlan.js"></script>
</body>
</html>在js中新增20条用户数据,能够进行增删设置,搜索设置


index.html是我的前端页面:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>儿童肠梗阻医疗辅助诊断系统</title>
</head>
<body>
儿童肠梗阻医疗辅助诊断系统
400-XXX-XXXX
账号登录
<form action="/https/wenku.csdn.net/login" method="post">
<input type="text" id="userid" name="userid" placeholder="请输入账号" required>
<input type="password" id="password" name="password" placeholder="请输入密码" required>
<button type="submit">登录</button>
忘记密码?
<input type="checkbox" id="agree" required>
<label for="agree">我已阅读并同意 《服务条款》 和 《隐私政策》</label>
</form>
</body>
</html>
# 登录路由
@app.route('/login', methods=['POST'])
def login():
userid = request.form.get('userid')
password = request.form.get('password')
...
这是我用flask处理登录逻辑的代码,要求获得userid和password之后,通过userid查询数据库对应的password,正确则跳转页面到home.html





