kubecube front components

# kube-form-tab

kube-form-tab 优化了 tab 的切换模式，也可以更方便的使用 v-model 关联组件状态，数组内所有数据均为mutable，可以被绑定到子组件上，方便表单结构和数据结构的统一。

# Demo

示例

实时数据观测：
root : []

# v-model

list: Array<Object>

# Props

props description default
disabled 隐藏增删 false
titleKey tab名对应的key值 undefined
tabKey tab的具名插槽名 undefined
dataTemplate 对象模板 () => ({})
initRequired 初始化一个 true
errorPrefix 报错名前缀 ''

# Slots

具名插槽

# tab 上的具名插槽

[ 
    { title: 'xxxx', tab: 'bbbb' },
    { title: 'pppp', tab: 'qqqqq' },
] // 数据

对应的表格中会创建两个具名插槽，分别对应对tab头和tab页的插槽

<tempate>
<kube-tab 
    v-model="tabs" 
    title-key="title"
    tab-key="tab">
    <template #[`bbbb.tab`]="{ model }">
        <!-- tab 头 -->
    </teamplte>
    <template #bbbb="{ model, state }">
        <!-- tab 页 -->
    </teamplte>
    <template #qqqqq="{ model, state }">
        <!-- tab 页 -->
    </teamplte>
</kube-tab>
</template>

# demo.vue

<template>
<div>
  <kube-tab
    v-model="tabs"
    :data-template="getDefault"
    >
    <template slot-scope="{ model: row, errorPrefix }">
         <u-form label-size="small" style="margin-top: 20px">
            <u-form-item label="a">
                <u-input v-model="row.a" />
            </u-form-item>
            <u-form-item label="b">
                <u-input v-model="row.b" />
            </u-form-item>
            <u-form-item label="c">
                <u-input v-model="row.c" />
            </u-form-item>
        </u-form>
    </template>
  </kube-tab>
  <demo-visualize-data v-model="tabs" />
</div>
</template>

<script>
import kubeTab from '@kubecube/common/kube-form-tab/index.vue'
export default {
    components: {
        kubeTab
    },
    data() {
        return {
            tabs: [],
        }
    },
    methods: {
        getDefault() {
            return {
                a: '',
                b: '',
                c: '',
            }
        }
    }
}
</script>

<style>

</style>

← kube-tree →