vue + elementui 使用多选按钮实现单选功能

 CommonRadio.vue

 <template>
     <div>
         <el-checkbox-group v-model="checkList" @change="handleChange">
             <el-checkbox :label="item[keyId]"  v-for="item in list" :key="item">{{item[label]}}</el-checkbox>
         </el-checkbox-group>
     </div>
 </template>

 <script>
     export default {
         props: {
             value: [String, Array],
             list: {
                 type: Array,
                 default () {
                     return [];
                 }
             },
             keyId: {
                 type: String,
                 default: 'value',
             },
             label: {
                 type: String,
                 default: 'label'
             },
         },
         data() {
             return {
                 checkList: [],
             }
         },
         watch: {
             value: {
                 immediate: true,
                 handler(val) {
                     this.checkList = [ val ];
                 }
             }
         },

         methods: {
             handleChange(arr) {
                 this.checkList.length > 1 && this.checkList.shift();

                 this.$nextTick(() => {
                     let val = this.checkList.length > 0 ? this.checkList[0] : '';
                     this.$emit('change', val);
                     this.$emit('input', val);
                 })
             }
         },
     }
 </script>

 调用

 <div class="associated-list">
                                 <template v-for="(item, index) in associatedList">
                                     <el-form-item :label="item.name"  :key="item" v-if=" (maxSize !== null ? index < maxSize : true)">
                                         <CommonRadio v-model="associated[`tags_${item.id}`]" :list="item.tags" :keyId="`id`" :label="`name`"></CommonRadio>
                                     </el-form-item>
                                 </template>

                                 <div class="get-more">
                                     <el-button type="text" @click="showMore" v-if="maxSize !== null && associatedList.length > 3">更多行为标签&gt;&gt;</el-button>
                                 </div>
                             </div>