//主頁(yè)面
<template>
?? ?<el-form :model="formData">
? ? ? ? //把從后端取到的數(shù)據(jù)傳給子組件，動(dòng)態(tài)生成slot插槽列表
? ? ? <FormItemSlot :formItemList="formItemList">
? ? ? ? <el-form-item label="開(kāi)關(guān)" slot="switch-component">
? ? ? ? ? <el-switch
? ? ? ? ? ? v-model="formData.checked"
? ? ? ? ? ? active-color="#13ce66"
? ? ? ? ? ? inactive-color="#ff4949"
? ? ? ? ? >
? ? ? ? ? </el-switch>
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="名字" slot="input-component">
? ? ? ? ? <el-input v-model="formData.username"></el-input>
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="角色" slot="select-component">
? ? ? ? ? <el-select v-model="formData.role" placeholder="請(qǐng)選擇">
? ? ? ? ? ? <el-option
? ? ? ? ? ? ? v-for="item in options"
? ? ? ? ? ? ? :key="item.value"
? ? ? ? ? ? ? :label="item.label"
? ? ? ? ? ? ? :value="item.label">
? ? ? ? ? ? </el-option>
? ? ? ? ? </el-select>
? ? ? ? </el-form-item>
? ? ? </FormItemSlot>
? ? </el-form>
</template>
<script>
?? ?improt 引入slot列表子組件 FromItemSlot（下面有）
? ? export default {
? ? ? ? data() {
? ? ? return { ? ? ? ? ? ??
? ? ? ? formItemList: [
? ? ? ? ? { type: 'switch-component', require: true, label: '開(kāi)關(guān)', key: 'isOpen' },
? ? ? ? ? { type: 'input-component', require: true, label: '姓名', key: 'name' },
? ? ? ? ? { type: 'select-component', require: true, label: '角色', key: 'role' },
? ? ? ? ],
? ? ? ? formData: {

? ? ? ? },
? ? ? ? options: [
? ? ? ? ? {
? ? ? ? ? ? value: '1',
? ? ? ? ? ? label: '李世民'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '2',
? ? ? ? ? ? label: '嬴政'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '3',
? ? ? ? ? ? label: '劉邦'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '4',
? ? ? ? ? ? label: '項(xiàng)羽'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '5',
? ? ? ? ? ? label: '范蠡'
? ? ? ? ? }
? ? ? ? ],
? ? ? }
? ? },
? ? components: {
? ? ? FormItemSlot
? ? },
}
</script>

//FormItemSlot.vue ?插槽列表
<template>
? <div class="slot-wrap">
? ? <slot v-for="(item, index) in formItemList" :name="item.type"></slot>
? </div>
</template>

<script>
? export default {
? ? name: 'FormItemSlot',
? ? props: {
? ? ? formItemList: {
? ? ? ? type: Array,
? ? ? ? default() {
? ? ? ? ? return []
? ? ? ? }
? ? ? }
? ? }
? }
</script>

<style scoped>

</style>