vue element 多选实现单选

1，在项目中是用循环生成多选组，并实现单选。在实际渲染中 会将多个多选列看成一个多选，

 <div v-for=" item  in attributeList" :key="'sku'+item.name" class="sku-body">
        <div class="sku-items-left">{{item.name}}:</div>
        <el-checkbox-group class="sku-items-right" size="mini" v-model="checkedList"
                           @change="handleCheckedValuesChange">
          <el-checkbox :border="true" size="mini" @change="city.checked=!city.checked" class="sku-items-box"
                       v-for="(city,index) in item.detail" :checked="city.checked" :label="city" :key="'index'+city.id">
            {{city.attributeName}}
          </el-checkbox>
        </el-checkbox-group>
      </div>

其中将选中的值 :lable="city"   在选中时会获取到选中的对象，
  分析： 在每次点击选择时 每次只增加一个，而且新增的对象添加在选中列表的末尾（队列形式）（该需求中无全选要求），  在chang事件中可以拿到新增的那个对象（队列的末尾）； 这样只要将新增的那个对象与之前的对象做比较，并修改相同的类的选中属性 :checked="city.checked"   其为false 就好；

 

   总结，对于多选列表实现单选，观察其选中数组对象列表新增为队列形式， 拿到新增的对象（队列末尾的一个值）与原来值做比较，如果有重复的修改重复的，并将其替换掉，如果没有重复的更新选中数组（添加拿到的队列中的末尾对象）；