本文实例为大家分享了vue实现动态表单动态渲染组件的方式,供大家参考,具体内容如下

思路

  • 先把所有可能出现的表单/组件写在主页面
  • 每个表单/组件的slot 属性值要与后端返回的表单/组件类型匹配
  • 根据后端返回的数据,动态生成一个slot列表,slot的name属性要与数据的类型匹配,此列表放入一个子组件
  • 在主页面引入子组件,把之前主页面写好的各个表单/组件放入子组件标签中,通过匹配slot插槽去渲染组件,没有匹配到插槽的则不会渲染

案例

//主页面
<template>
    <el-form :model="formData">
        //把从后端取到的数据传给子组件,动态生成slot插槽列表
      <FormItemSlot :formItemList="formItemList">
        <el-form-item label="开关" 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: '开关', 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: '项羽'
          },
          {
            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>

以上数据会直接收集到formData中,此方式的好处在于表单数据都在一个页面,方便数据处理.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部