扩展字段,动态FormItem

本文介绍如何在Vue.js项目中使用DynamicFormItem组件和ExtensionField组件来实现动态表单扩展字段的配置和存储。通过在配置项中定义扩展字段,并将JSON数据转化为字符串存储到数据库,在新增数据时读取并利用这些字段,提交时调用子组件的submit方法获取表单数据。
摘要由CSDN通过智能技术生成

在配置项中配置扩展字段,然后在对应新增处新增数据

在这里插入图片描述
在这里插入图片描述

DynamicFormItem 动态FormItem 组件

<template>
  <div>
    <el-divider content-position="left">扩展字段</el-divider>
    <el-form-item
      v-for="(item,key) in jsonList"
      :key="key"
      :label="item.name + ':'"
      :prop="item.code"
    >
      <el-input v-if="item.valueType === 'text'" v-model="myData.formData[item.code]" />

      <el-select
        v-if="item.valueType === 'select'"
        v-model="myData.formData[item.code]"
        filterable
      >
        <el-option
          label="请选择"
          value=""
        />
        <el-option
          v-for="(d, itemIndex) in item.selectItem.split(',')"
          :key="itemIndex"
          :label="d"
          :value="d"
        />
      </el-select>
      <el-date-picker
        v-if="item.valueType === 'date'"
        v-model="myData.formData[item.code]"
        type="datetime"
        placeholder="选择日期"
      />
      <Upload v-if="item.valueType === 'upload'" v-model="myData.formData[item.code]" />
    </el-form-item>
  </div>
</template>

<script>
import Upload from '@/components/Upload'
var myData = {
   
  formData: {
   }
}
export default {
   
  components: {
    Upload },
  props: {
   
    jsonList: {
   
      type: Array,
      default: () => {
   
        return []
      }
    },
    jsonData: {
   
      type: Object,
      default: () => {
   
        return null
      },
      requerd: false
    }
  },
  data() {
   
    return {
   
      myData
    }
  },
  created() {
   
    this.getInit()
  },
  methods: {
   
    submit() {
   
      return JSON.stringify(this.myData.formData
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值