vue實(shí)現(xiàn)動態(tài)表單動態(tài)渲染組件的方式(2)

更新時間：2022年04月06日 14:56:18 作者：兮木兮木

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動態(tài)表單動態(tài)渲染組件的方式第二篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)動態(tài)表單動態(tài)渲染組件的方式，供大家參考，具體內(nèi)容如下

思路

先把所有可能出現(xiàn)的表單/組件寫在主頁面
每個表單/組件的slot 屬性值要與后端返回的表單/組件類型匹配
根據(jù)后端返回的數(shù)據(jù)，動態(tài)生成一個slot列表，slot的name屬性要與數(shù)據(jù)的類型匹配，此列表放入一個子組件
在主頁面引入子組件，把之前主頁面寫好的各個表單/組件放入子組件標(biāo)簽中，通過匹配slot插槽去渲染組件，沒有匹配到插槽的則不會渲染

案例

//主頁面
<template>
?? ?<el-form :model="formData">
? ? ? ? //把從后端取到的數(shù)據(jù)傳給子組件，動態(tài)生成slot插槽列表
? ? ? <FormItemSlot :formItemList="formItemList">
? ? ? ? <el-form-item label="開關(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="請選擇">
? ? ? ? ? ? <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: '開關(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>

以上數(shù)據(jù)會直接收集到formData中，此方式的好處在于表單數(shù)據(jù)都在一個頁面，方便數(shù)據(jù)處理.

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: