VUE 使用IView 中的 CheckboxGroup 实现分组内单选功能

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();
    },
  }
}