vue vjsf通过json配置生成填写简历表单结果输出json效果代码-html代码-BFW代码库

vue vjsf通过json配置生成填写简历表单结果输出json效果代码

代码语言：html

代码描述：使用vue的vjsf来通过编写json配置数据来生成填写简历的表单，支持工作经历和教育经历增删改并将表单提交结果输出json效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/materialdesignicons.4.0.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vuetify.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vjsf.main.css">



</head>

<body translate="no">
    <v-app id="app">
        <v-container>
            {{model}}
            <p>valid={{valid}}</p>
            <v-form ref="form" v-model="valid">
                <v-jsf v-model="model" :schema="schema" :options="options" />
            </v-form>
            <v-layout row class="mt-2">
                <v-spacer></v-spacer>
                <v-btn color="primary" @click="$refs.form.validate()">Validate</v-btn>
            </v-layout>
        </v-container>
    </v-app>

    <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/vuetify.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vjsf.main.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vjsf.third-party.js"></script>

    <script>
      

    
            const model = {};
            
            const options = {
                 "locale": "zh",
              hideReadOnly: false };
            
            
            const schema = {
    	type: 'object',
    	 "required":["name", "state","selfremark","work","education"],
    	properties: {
    	      name: {
                  type: "string",
                  title: "姓名",
                
                 },
                  birthday: {
                  type: "string",
                  title: "生日",
                  format:"date"
                 },
                  state: {
                  type: "string",
                  title: "状态",
                 enum: [
    				'已离职随时可以入职',
    				'在职中看看其他机会'
    			]
                 },
                   selfremark: {
                  type: "string",
        .........完整代码请登录后点击上方下载按钮下载查看