首页 > 其他分享 >一个基于Vue模型的表单生成器

一个基于Vue模型的表单生成器

时间:2023-09-14 21:55:10浏览次数:46  
标签:Vue form 生成器 表单 checkbox base Vuetify vuetify

哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!

图片

Vuetify Form Base是一个基于模型的表单生成器,目的是提供一个工具,以便以较少的努力从任何模型数据生成可编辑的表单,即使模型是一个深度嵌套的对象。

Vuetify Form Base作为Vue组件工作,可以很容易地集成到任何VUE项目中。

安装

Npm

npm i vuetify-form-base

Yarn

yarn add vuetify-form-base

使用

首先要在src/plugins/vuetify.js中引入所有必要的组件和指令。

import Vue from 'vue';
import Vuetify, {
    VRow,
    VCol,
    VTextField,
    VTooltip,
    VCheckbox,
    VSelect,
} from 'vuetify/lib';
import { Ripple, Intersect, Touch, Resize } from 'vuetify/lib/directives';

Vue.use(Vuetify, {
    components: { VRow, VTooltip, VCol, VTextField, VCheckbox, VSelect },
    directives: { Ripple, Intersect, Touch, Resize },
});

export default new Vuetify({
    icons: {
        iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
    }
});

通过v-form-base组件使用:

<v-form-base :model="myModel" :schema="mySchema" @input="handleInput" />

Model 及 Schema

Model: {
    name: 'base',
    details: {
        one: ['a','b','c'],
        two: { 
            a:true, 
            b:false 
        }
    }
}

Schema: {
    name:'text',
    details: { 
        one:{ type:'array' },
        two: { 
            a:'checkbox'  // shorthand for { type:'checkbox', label:'a']
            b:'checkbox'  // shorthand for { type:'checkbox', label:'b']
        }
    }
}

示例

图片

Github地址:https://github.com/wotamann/vuetify-form-base

标签:Vue,form,生成器,表单,checkbox,base,Vuetify,vuetify
From: https://www.cnblogs.com/oldfish517/p/17703590.html

相关文章

  • Vue介绍
    前端的发展史1HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看2Ajax的出现->后台发送异步请求,Render+Ajax混合3单用Ajax(加载数据,DOM渲染页面......
  • 编辑新增使用同一个表单
    编辑新增使用一个表单列表展示table<template><divclass="mod-configml10"><!--搜索--><divclass="searchsearchHead"v-show="showSearch"><el-formref="searchForm":model="searchForm&......
  • 解决vue3中抽离出来的js如何调用页面的方法
    有时我们会用render渲染表格的columns,里面的按钮如何去调用.vue文件的方法?思路;在.vue文件中我们通过参数的方式传给.js文件,然后用变量接收,点击时执行(注意:.vue文件中setup执行比较早,按钮是点击事件,不会主动执行函数。为防止函数未声名就当做参数传递,必须在最后执行getFn函数,和d......
  • vue 初识
    一、前端的发展史1、前端的发展演变#1HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看#2Ajax的出现->后台发送异步请求,Render+Ajax混合......
  • 迭代器的总结和生成器
    迭代器的总结和生成器迭代器总结(迭代取值和索引取值的对比生成器(自定义的迭代器)(yield)生成器表达式yield和return的对比迭代器总结(迭代取值和索引取值的对比迭代取值 1.不依赖于索引取值的一种取值方式2.不能够重复取值,只能够从左往右固定取值索引取值 1.......
  • mybatisplus代码生成器 死活连接不上
    dburl改一下:jdbc:mysql://124.220.134.111:3306/content?useUnicode=true&characterEncoding=UTF-8&autoReconnect=true&useSSL=false&zeroDateTimeBehavior=convertToNull&serverTimezone=Asia/Shanghai    &useSSL=false一定要加这个鬼东西沃日......
  • vue3 elementplus 列表中添加排序功能,移动的时候修改背景色
    <el-tablesize="medium":border="true":data="branchTableData":row-style="changeColor":stripe=falsestyle="width:100%;">......
  • 迭代器总结、生成器、生成器表达式、常用的68个内置函数
    迭代器总结(迭代取值和索引取值的对比)#迭代器主要就是一个迭代取值,另外一种取值方式就是索引(下标)取值l=[1,2,3,4]res=l.__iter__()res.__next__()#1res.__next__()#2res1=l.__iter__()res1.__next__()#1res1.__next__()#2迭代取值 1.不依赖......
  • Vue学习四:组件的三大组成部分、组件通信和进阶语法
    一、组件的三大组成部分<template>里面只能有一个根元素<style>全局样式(默认):影响所有组件局部样式:scoped下样式,只作用于当前组件<script>el根实例独有,data是一个函数,其他配置项一致二、scoped设置局部样式默认情况:写在组件中的样式会全局生效→因此很容易造成多......
  • vue 数学公式js加载
    <script>document.addEventListener("DOMContentLoaded",function(){renderMathInElement(document.body,{//customisedoptions//•auto-renderspecifickeys,e.g.:delimiters:[{left:'$......