<style scoped>
    .source{
        width: 20%;
        min-width: 200px;
    }
</style>

## SelectTab 下拉选项卡

### 基础用法
下拉选项卡是下拉组件和选项卡组件的结合。

1. selectbox即下拉容器 `v-model`属性为当前选中项，可用做回显数据接口。
2. selectbox-tabs即选项卡`v-model`属性为当前展开的面板。
3. selectbox-pane即各选项卡子面板`label`。
4. selectbox-item为子项组件。


:::demo
```html
<div>
<mc-selectbox v-model="selectKey">
    <mc-selectbox-tabs v-model="selectActiveKey">
        <mc-selectbox-pane
                v-for="tabs in selectTabsData"
                :label="tabs.category"
                :name="tabs.category">
            <mc-selectbox-item
                    v-for="(item, index) in tabs.list"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                    :item="{'a':item,'b':index}">
            </mc-selectbox-item>

        </mc-selectbox-pane>
    </mc-selectbox-tabs>
</mc-selectbox>
</div>
<script>
    export default {
        data() {
            return {
                selectKey: '',
                selectActiveKey: '联系方式',
                selectTabsData:  [
                    {
                        category: '联系方式',
                        list: [
                            {
                                id: '联系方式1id1',
                                name: '名称1name1',
                                code: '名称1code1',
                                type: '名称1ype1'
                            },
                            {
                                id: '联系方式1id2',
                                name: '名称1name2',
                                code: '名称1code2',
                                type: '名称1type2'
                            }
                        ]
                    },

                    {
                        category: '自定义',
                        isShowFooter: true,
                        list: [
                            {
                                id: '自定义id1',
                                name: '自定义name1',
                                code: '自定义code1',
                                type: '自定义ype1'
                            },
                        ]
                    }
                ]
            }
        }
    }
</script>
```
:::


### 在自定义面板内添加footer组件
:::demo
```html
<div>
    <mc-selectbox v-model="selectKey">
        <mc-selectbox-tabs v-model="selectActiveKey">
            <mc-selectbox-pane
                    v-for="tabs in selectTabsData"
                    :label="tabs.category"
                    :name="tabs.category">
                <mc-selectbox-item
                        v-for="(item, index) in tabs.list"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                        :item="{'a':item,'b':index}">
                </mc-selectbox-item>

                <mc-select-footer v-if="tabs.isShowFooter">
                    <span>没有您需要的选项？</span>
                    <a>新建客户类型</a>
                </mc-select-footer>

            </mc-selectbox-pane>
        </mc-selectbox-tabs>
    </mc-selectbox>
</div>
<script>
    export default {
        data() {
            return {
                selectKey: '',
                selectActiveKey: '联系方式',
                selectTabsData:  [
                    {
                        category: '联系方式',
                        list: [
                            {
                                id: '联系方式1id1',
                                name: '名称1name1',
                                code: '名称1code1',
                                type: '名称1ype1'
                            },
                            {
                                id: '联系方式1id2',
                                name: '名称1name2',
                                code: '名称1code2',
                                type: '名称1type2'
                            }
                        ]
                    },
                    {
                        category: '自定义',
                        isShowFooter: true,
                        list: [
                            {
                                id: '自定义id1',
                                name: '自定义name1',
                                code: '自定义code1',
                                type: '自定义ype1'
                            },
                        ]
                    }
                ]
            }
        }
    }
</script>
```
:::


### selectbox 属性

|参数		|说明		    |类型		|可选值		|默认值		|
|-----------|---------------|-----------|-----------|-----------|
|v-model	|当前选中项（selectbox-item）的value值	|String		| — 		| — 		|

<br><br>

### selectbox-tabs 属性

|参数		|说明		    |类型		|可选值		|默认值		|
|-----------|---------------|-----------|-----------|-----------|
|v-model	|当前面板（selectbox-pane）的name值，可做回显接口	|String		| — 		| — 		|

<br><br>

### selectbox-pane 属性

|参数		|说明		    |类型		|可选值		|默认值		|
|-----------|---------------|-----------|-----------|-----------|
|label	    |面板标题文本   	|String		| — 		| — 		|
|name	    |面板别名，会透传到 selectbox-tabs 的 v-model 中  	    |String		| — 		| — 		|

<br><br>

### selectbox-item 属性

|参数		|说明		    |类型		|可选值		|默认值		|
|-----------|---------------|-----------|-----------|-----------|
|label	    |当前选中项文本   	|String		| — 		| — 		|
|name	    |当前选中项别名，会透传到 selectbox 的 v-model 中  	    |String		| — 		| — 		|
