vue v-model 数组 checkbox

最新推荐文章于 2025-01-11 19:56:12 发布

王维诗里的绿豆

最新推荐文章于 2025-01-11 19:56:12 发布

阅读量858

点赞数

CC 4.0 BY-SA版权

分类专栏： debj 文章标签： vue

@debj

本文链接：https://blog.youkuaiyun.com/ice_debj/article/details/106101420

debj 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用Vue.js实现角色权限管理，通过前后端交互，动态加载角色和权限信息，并在前端实现根据角色选择相应权限的功能。具体实现包括初始化加载数据、更新角色权限等。

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

文章目录

一、选中数组中有其值的 checkbox
- 1-1】js 代码
- 1-2】前端代码

注：【网页版】右上方的悬浮框（有目录索引）

一、选中数组中有其值的 checkbox

1-1】js 代码

var vue = new Vue({
	el:"#app",
	data:{
		roleqxs:[],
		qxs:[],
		updateQxInfo:[]
	},
	methods:{
		initLoadData(){
			// 后台查询出数据
			// 返回值中包括 1）角色及其权限信息 2）所有权限
			$.get("http://localhost:8080/getAllInfo",function(res){
				console.log(res);
				vue.qxs=res.data.QxInfo;  // 存储权限信息
				vue.roleqxs=res.data.RoleQxInfo;  // 存储角色及其权限信息
				
				// 循环遍历 角色及其权限 集合
				vue.roleqxs.forEach(function(obj){
					obj.qx.forEach(function(res){
						vue.updateQxInfo.push(obj.id+"-"+res.id)
					})
				})
				console.log(vue.updateQxInfo)
			})
		},
		toUpdate(){
			$.post("http://localhost:8080/updateRoleQx","list="+vue.updateQxInfo,function(res){
				alert(res);
			})
		}
	},
	mounted:function(){
		this.initLoadData()
	}
})

1-2】前端代码

<tbody>
	<tr v-for="item,index1 in roleqxs">
		<td>{{item.role}}</td>
		<td>
			<span v-for="ii in qxs" class="debj_span_fk">
				<input type="checkbox" v-model="updateQxInfo" :value="item.id+'-'+ii.id"/>
				{{ii.permission}}
			</span>
		</td>
	</tr>
</tbody>