VUE问题，有五个如果在窗体上有两组单选按钮钮组只有全选是才能提交，如果有一个选否就不可以提交，如图所示？

来源：蜘蛛抓取(WebSpider) 时间：2023-08-24 11:16 标签： 如果在窗体上有两组单选按钮
在vue中实现默认选中以及获取单选/复选框的value值都会用到同一个方法，那就是在data中定义一个数组，然后用v-model=“这个数组”data: { whoms:[1,2], } 这样就会默认选中value值是1和2的，当然也可以是字符串{{key+1}} 如果是多选框，那么你选中几个，data: { whoms:[], }中就会存在几个value的值这个就是vue全选的方法 全选 /全不选
反选
在这里全选，反选可以是复选框也可以是按钮，自己随意:checked="whoms.length==sites.length" 这句代码是实现，全选（全不选）这个按钮和整体数值的绑定，就是一个个的选中全部的复选框后，全选（全不选）按钮就会自动选中 allChecked: function() { if (this.whoms.length == this.sites.length) { // 全不选 this.whoms = []; }else { this.whoms = []; // 全选 this.sites.forEach((site)=>{ this.whoms.push(site.nid); // 与checkbox的value统一 }) } }, 上面两个方法就是核心！this.whoms.length == this.sites.length当相等的时候说明是已经全部选中，这时候点击全选（全不选）按钮是为了全不选，否则就是打算全选 fanChecked:function(){ // f反选 this.sites.forEach((site)=>{ if(this.whoms.indexOf(site.nid)==-1){ this.whoms.push(site.nid); }else{ var nkey=this.whoms.indexOf(site.nid); this.whoms.splice(nkey,1); } }) }, 反选 就是用到Java的indexOf()方法 如果数组中本来就有那就是你自己选中的也就是indexOf()方法返回的值大于-1 就利用索引把这个元素删除掉，如果*indexOf()方法返回的值等于-1说明数组中没有这个值，也即是你反选的内容，需追加，这样vue的全选全不选反选就做好了
实现效果多选单选联动主要代码一，html部分
{{ i.name }}
二，js部分这里需求不止一个服务管理，所以是一个数组格式，可根据需求调整代码 const state = reactive({ scopeList: [ { name: "服务管理", checkedList: ref([] as any), indeterminate: false, checkAll: false, children: [ { name: "新增服务", id: 0, }, { name: "分组管理", id: 1, }, { name: "样式设置", id: 2, }, { name: "批量操作", id: 3, }, { name: "编辑", id: 4, }, { name: "删除", id: 5, }, ], }, ], });三，多选方法 const checkAllChange = (event, index) => { let withOutPmIds = state.scopeList[index].children.map((item) => { return item.id; }); state.scopeList[index].checkedList = event.target.checked ? withOutPmIds : []; };四，单选方法 const onCheckChange = (event, index) => { const checkedLength = state.scopeList[index].checkedList.length; const listLength = state.scopeList[index].children.length; state.scopeList[index].indeterminate = !!checkedLength && checkedLength < listLength; state.scopeList[index].checkAll = checkedLength > 0 && checkedLength === listLength; };

我要回帖

更多关于 如果在窗体上有两组单选按钮 的文章

 

随机推荐