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>