kube-dynamic

kube-dynamic-* 可以更方便的使用 v-model 关联组件状态，数组内所有数据均为mutable，可以被绑定到子组件上，方便表单结构和数据结构的统一。

Demo

A	B	C

添加

+ 添加镜像仓库配置

实时数据观测：

root :

demos : []

demob : []

v-model

list: Array<Object>

Props

props	description	example	default
dataTemplate	行对象模板	() => ({ a: 'xx', b: 'ccc' })
initRequired	是否需要初始一行	true or false	true
disabled	不允许增删	true or false	true
prefixKey	报错前缀（配合vee-validator）	'xxxx'
layoutComp	布局组件		kube-dynamic-table-layout/index
rowComp	行组件		kube-dynamic-table-layout/row
columnComp	列组件		kube-dynamic-table-layout/column

Slot

props	description	example
model	当前行对象
index	当前行序号
remove	删除操作（Function）

table.vue

<template>
    <kube-dynamic-block
        v-model="model"
        style="width: 100%;"
        :data-template="getDataTemplate"
    >
     <template slot="column">
        <th>A</th>
        <th>B</th>
        <th>C</th>
    </template>
    <template slot-scope="{ model: row, index }">
        <td>
            <u-input v-model="row.a" />
        </td>
        <td>
            <u-input v-model="row.b" />
        </td>
        <td>
            <u-input v-model="row.c" />
        </td>
    </template>
    </kube-dynamic-block>
</template>

<script>
import kubeDynamicBlock from '@kubecube/common/kube-dynamic-block.vue'
import { makeVModelMixin } from '@kubecube/mixins/functional';
export default {
    mixins: [ makeVModelMixin ],
    components: {
        'kube-dynamic-block': kubeDynamicBlock
    },
    methods: {
        getDataTemplate() {
            return {
                a: '',
                b: '',
                c: ''
            }
        }
    }
}
</script>

<style>

</style>

block.vue

<template>
    <kube-dynamic-block
        v-model="model"
        style="width: 100%;"
        :layout-comp="blockLayout"
        :row-comp="blockRowLayout"
        :column-comp="null"
        :data-template="getDataTemplate"
        button-name="添加镜像仓库配置"
    >
        <template slot-scope="{ model: row, index }">
            <u-form label-size="small">
                <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-dynamic-block>
</template>

<script>
import kubeDynamicBlock from '@kubecube/common/kube-dynamic-block.vue'
import { makeVModelMixin } from '@kubecube/mixins/functional';
import blockLayout from '@kubecube/common/kube-dynamic-block-layout/index.vue';
import blockRowLayout from '@kubecube/common/kube-dynamic-block-layout/row.vue';

export default {
    mixins: [ makeVModelMixin ],
    components: {
        'kube-dynamic-block': kubeDynamicBlock
    },
    data() {
        return {
            blockLayout,
            blockRowLayout,
        };
    },
    methods: {
        getDataTemplate() {
            return {
                a: '',
                b: '',
                c: '',
            };
        },
    },
}
</script>

<style>

</style>

form-item.vue

<template>
<div>
    <kube-table-dynamic v-model="demos"/>
    <br />
    <kube-block-dynamic v-model="demob"/>
    <demo-visualize-data v-model="combined" />
</div>
</template>

<script>
import table from './table.vue';
import block from './block.vue';
export default {
    components: {
        'kube-table-dynamic': table,
        'kube-block-dynamic': block,
    },
    data() {
        return {
            demos: [],
            demob: [],
        }
    },
    computed: {
        combined() {
            return {
                demos: this.demos,
                demob: this.demob,
            }
        }
    }
}
</script>

<style>

</style>