<template>
    <ht-base-tabs type="card">
        <ht-base-tab-pane v-for="(item, i) in tabs" :key="i" :tab="item.tab" :closable="item.closable">{{ item.tab }}的内容</ht-base-tab-pane>
        <ht-base-button @click="handleTabsAdd" size="small" slot="extra">增加</ht-base-button>
    </ht-base-tabs>
</template>
<script>
    export default {
        name: 'HtBaseTabsCloseDemo',
        data () {
            return {
                tabs: [
                    {
                        tab: '标签一',
                        closable: true

                    },
                    {
                        tab: '标签二',
                        closable: true

                    },
                    {
                        tab: '标签三',
                        closable: false

                    }
                ]
            }
        },
        methods: {
            handleTabsAdd () {
                this.tabs.push({
                    tab: '新标签',
                    closeable: true
                });
            }
        }
    }
</script>
