Iview Tag标签，多个标签只能选择其中的几个

iview没有监听是否选中的属性，tag是否选中是由两个属性决定的checked,isChecked, isChecked主要决定了是否选中的标签样式。
源码：

<template>
    <transition name="fade" v-if="fade">
        <div :class="classes" @click.stop="check" :style="wraperStyles">
            <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
            <span :class="textClasses" :style="textColorStyle"><slot></slot></span>
            <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close" @click.native.stop="close"></Icon>
        </div>
    </transition>
    <div v-else :class="classes" @click.stop="check" :style="wraperStyles">
        <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
        <span :class="textClasses" :style="textColorStyle"><slot></slot></span>
        <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close" @click.native.stop="close"></Icon>
    </div>
</template>
<script>
    import Icon from '../icon';
    import { oneOf } from '../../utils/assist';
    const prefixCls = 'ivu-tag';
    const initColorList = ['default', 'primary', 'success', 'warning', 'error', 'blue', 'green', 'red', 'yellow', 'pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
    const colorList = ['pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
    export default {
        name: 'Tag',
        components: { Icon },
        props: {
            closable: {
                type: Boolean,
                default: false
            },
            checkable: {
                type: Boolean,
                default: false
            },
            checked: {
                type: Boolean,
                default: true
            },
            color: {
                type: String,
                default: 'default'
            },
            type: {
                validator (value) {
                    return oneOf(value, ['border', 'dot']);
                }
            },
            name: {
                type: [String, Number]
            },
            fade: {
                type: Boolean,
                default: true
            }
        },
        data () {
            return {
                isChecked: this.checked
            };
        },
        computed: {
            classes () {
                return [
                    `${prefixCls}`,
                    {
                        [`${prefixCls}-${this.color}`]: !!this.color && oneOf(this.color, initColorList),
                        [`${prefixCls}-${this.type}`]: !!this.type,
                        [`${prefixCls}-closable`]: this.closable,
                        [`${prefixCls}-checked`]: this.isChecked
                    }
                ];
            },
            wraperStyles () {
                return oneOf(this.color, initColorList) ? {} : {background: this.isChecked ? this.defaultTypeColor : 'transparent', borderWidth: '1px', borderStyle: 'solid', borderColor: ((this.type !== 'dot' && this.type !== 'border' && this.isChecked) ? this.borderColor : this.lineColor), color: this.lineColor};
            },
            textClasses () {
                return [
                    `${prefixCls}-text`,
                    this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '',
                    (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked && colorList.indexOf(this.color) < 0 ? `${prefixCls}-color-white` : '') : ''
                ];
            },
            dotClasses () {
                return `${prefixCls}-dot-inner`;
            },
            iconClass () {
                if (this.type === 'dot') {
                    return '';
                } else if (this.type === 'border') {
                    return oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '';
                } else {
                    return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : '';
                }
            },
            showDot () {
                return !!this.type && this.type === 'dot';
            },
            lineColor () {
                if (this.type === 'dot') {
                    return '';
                } else if (this.type === 'border') {
                    return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '';
                } else {
                    return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : '';
                }
            },
            borderColor () {
                return this.color !== undefined ? (this.color === 'default' ? '' : this.color) : '';
            },
            dotColor () {
                return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '';
            },
            textColorStyle () {
                return oneOf(this.color, initColorList) ? {} : ((this.type !== 'dot' && this.type !== 'border') ? (this.isChecked ? {color: this.lineColor} : {}) : {color: this.lineColor});
            },
            bgColorStyle () {
                return oneOf(this.color, initColorList) ? {} : {background: this.dotColor};
            },
            defaultTypeColor () {
                return (this.type !== 'dot' && this.type !== 'border') ? (this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '') : '';
            }
        },
        methods: {
            close (event) {
                if (this.name === undefined) {
                    this.$emit('on-close', event);
                } else {
                    this.$emit('on-close', event, this.name);
                }
            },
            check () {
                if (!this.checkable) return;
                const checked = !this.isChecked;
                this.isChecked = checked;
                if (this.name === undefined) {
                    this.$emit('on-change', checked);
                } else {
                    this.$emit('on-change', checked, this.name);
                }
            }
        },
        watch: {
            checked (val) {
                this.isChecked = val;
            }
        }
    };
</script>

如果需要判断，则需要在on-change事件中，自己给底层的isChecked赋值，
（this.$refs.show.filter(f=>f.name==name)[0].isChecked=checked 赋值）
下面是自己写的demo:最多选中两个标签

<template>
    <Tag checkable v-for="item in datas" ref="show" color="primary" :checked="item.checked" :name="item.text" @on-change='test'>{{item.text}}</Tag>
</template>
<script>
    export default {
        data(){
          return{
          datas:[{text:0,checked:false},{text:1,checked:false},{text:2,checked:false},{text:3,checked:false}],
        }
        },
      methods:{
        test(checked,name){
         this.$refs.show.filter(f=>f.name==name)[0].isChecked=checked
          if(name==2){
            this.$Message.info({
                content: "2不能选！",
                duration: 2
            });
             this.$refs.show.filter(f=>f.name==name)[0].isChecked=false
             }
        }
      }
    }
</script>