VUE 使用IView 中的 CheckboxGroup 实现分组内单选功能
VUE 使用IView 中的 CheckboxGroup 实现分组内单选功能,可以选择多个Checkbox,但是每组只能选择一个元素;整体实现思路,通过本次选择的结果和上次选择的结果对比,得到当前选择的元素id,根据当前选中的id找到当前元素的兄弟元素,将除过自己的兄弟元素从选中的集合中删除,从而达到组内单选的效果页面布局<Collapse v-model="OpenPanel" v-sho
·
VUE 使用IView 中的 CheckboxGroup 实现分组内单选功能,可以选择多个Checkbox,但是每组只能选择一个元素;
整体实现思路,通过本次选择的结果和上次选择的结果对比,得到当前选择的元素id,根据当前选中的id找到当前元素的兄弟元素,将除过自己的兄弟元素从选中的集合中删除,从而达到组内单选的效果
页面布局
<Collapse v-model="OpenPanel" v-show="DataList.length > 0 ">
<Panel :name="item.ID+''" v-for="(item,Index) in DataList" :key="item.ID">
{{item.TypeName}}
<div slot="content">
<CheckboxGroup v-model="model.TypeTagArry" @on-change="TagChange">
<Checkbox v-for="(info,i) in item.ChildList" :key="info.ID" :label="info.ID" border>{{info.TypeName}}</Checkbox>
</CheckboxGroup>
</div>
</Panel>
</Collapse>
CheckboxGroup组绑定的change方法为TagChange,以及根据当前元素去除已经选中的兄弟元素方法
export default {
props: {
model: Object,
},
data(){
return{
OpenPanel:[],//当前选中的标记id
DataList: [],//数据列表
TypeTagAll:[],//复选框组ID PID 格式的数据源。
}
},
methods:{
TagChange(arry){
if(this.model.HistoryArry.length > this.model.TypeTagArry.length){//取消了勾选
this.model.HistoryArry = JSON.parse(JSON.stringify(this.model.TypeTagArry));
}else{//新增勾选
//通过本次选择的结果和上次选择的结果对比,得到当前选择的元素id
var newArry = this.model.HistoryArry.concat(this.model.TypeTagArry).filter(function(v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v);
});
//console.log(JSON.stringify(aa));
//根据当前选择的id去除兄弟元素
this.TypeTagChange(newArry[0]);
//将最终的结果作为本次操作后的历史版本,用于下次操作进行对比
this.model.HistoryArry = JSON.parse(JSON.stringify(this.model.TypeTagArry));
}
console.log("TypeTagArry: "+JSON.stringify(this.model.TypeTagArry)+" HistoryArry: "+JSON.stringify(this.model.HistoryArry));
},
TypeTagChange(TypeTagID){
//根据当前选中的id找到当前元素的兄弟元素,将除过自己的兄弟元素从集合中删除,从而达到单选的效果
if(TypeTagID != 0){
var _this = this;
if(this.model.TypeTagArry.length > 1 && TypeTagID > 0){
var index = this.model.TypeTagArry.indexOf(TypeTagID);
if(index > -1){
//查找当前选项的对象
var list = this.TypeTagAll.filter(function(e){ return e.ID == TypeTagID; });
//根据当前对象的父级筛选出所有的兄弟元素。
list = this.TypeTagAll.filter(function(e){ return e.PID == list[0].PID; });
list.forEach(function(info,i){
//从已选择的数据中去除掉已选择的兄弟元素
var index = _this.model.TypeTagArry.indexOf(info.ID);
if(index >= 0 &&_this.model.TypeTagArry.length > 0 && TypeTagID != info.ID){
_this.model.TypeTagArry.splice(index, 1);
}
});
}
}
}
this.$forceUpdate();
},
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)