elementui+vue实现json数组生成表单提交效果代码-html代码-BFW代码库

elementui+vue实现json数组生成表单提交效果代码

代码语言：html

代码描述：elementui+vue实现json数组生成表单提交效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/elementui.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/elementui.js"></script>

    <style>
    </style>
</head>

<body>
    <div id="app">
        <el-form :model="formData">
            <el-form-item v-for="item in formData" :key="item.field" :label="item.title">
                <el-radio-group v-if="item.type === 'radio'" v-model="item.value">
                    <el-radio v-for="opt in item.options" :key="opt.value" :label="opt.value">{{opt.label}}</el-radio>
                </el-radio-group>
                  <el-input  v-if="item.type === 'input'" style="width: 180px" size="mini" v-model="item.value">
            
                </el-input >
                
                <el-select v-else-if="item.type === 'select'" v-model="item.value">
                    <el-option v-for="opt in item.options" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
                </el-select>

            </el-form-item>
            <el-button type="primary" @click.........完整代码请登录后点击上方下载按钮下载查看