不用写代码也能做表单 —— 加载meta即可 菜单表单加载json运行效果。ModelAbout
时间:2022-07-24
本文章向大家介绍不用写代码也能做表单 —— 加载meta即可
菜单表单加载json运行效果。ModelAbout,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
做增删改查要写多少代码?
一个表单一套代码,十个表单十套代码吗?
我这么懒,怎么会写这么多代码? 我想做到:即使一百个表单也只需要一套代码(而且不需要复制粘贴)。实现多个表单,只需要加载不同的meta即可。
Meta结构部分上一个已经写了,这里说一下如何做表单。
表单demo
先做两个简单的表单,一个是公司信息,一个是员工信息。 代码很简单,先做一个简单的菜单:
菜单
<div style="background-color:#dddddd;height:600px;width:100px;float:left;">
<a href="#" @click="myClick('companyForm')">公司信息</a> <br>
<a href="#" @click="myClick('personForm')">员工信息</a>
</div>
表单
然后用v-for把
循环出来,然后把组件放进去,
<div style="background-color:#eee;height:600px;width:400px;float:left;">
<table>
<tr v-for="(item,index) in metaInfo" :key="index">
<td align="right">{{item.title}}:
</td>
<td align="left">
<nfInput v-model="modelValue[item.colName]" :meta="item" />
</td>
</tr>
</table>
</div>
加载json
然后在setup里面加载json,设置好meta,再顺便动态创建一个model,就ok了。
<script>
import { ref } from 'vue'
// import nfHelp from '@/components/nf-meta-help.vue'
import nfInput from '@/components/nf-form-item.vue'
export default {
name: 'FormDemo',
components: {
// nfHelp,
nfInput
},
setup () {
const json = require('./FormDemo.json') // 加载meta信息,json格式
const modelValue = ref({}) // 放数据的model
const metaInfo = ref(json.companyForm) // 表单需要的meta信息
const myClick = (key) => {
// 更换表单的meta
metaInfo.value = json[key]
// 创建model
modelValue.value = {}
for (var k in metaInfo.value) {
var item = metaInfo.value[k]
modelValue.value[item.colName] = ''
}
}
myClick('companyForm')
return {
modelValue,
metaInfo,
myClick
}
}
}
</script>
运行效果。
点击菜单,并不是切换“页面”,也不是切换组件,而是更改meta,meta一变,表单就变了,是不是很简单,这样表单再多也不用担心做不过来了。
Model
可以事先做好放在meta里面,也可以动态创建出来,我这么懒当然选择动态创建了。简单结构的model都是没啥问题的。
- WCF的安全审核——记录谁在敲打你的门
- Step By Step 一步一步写网站[1] —— 填加数据
- 五个解决方案让MongoDB拥有RDBMS的鲁棒性事务
- Step By Step 一步一步写网站[1] —— 帧间压缩,表单控件
- [WCF-Discovery]如何利用”发现代理”实现可用服务的实时维护?
- 深度学习与机器学习
- Step By Step 一步一步写网站[1] —— 填加数据(二)
- [WCF-Discovery]让服务自动发送上/下线通知[原理篇]
- [WCF-Discovery]让服务自动发送上/下线通知[实例篇]
- [WCF权限控制]利用WCF自定义授权模式提供当前Principal[实例篇]
- [WCF权限控制]利用WCF自定义授权模式提供当前Principal[原理篇]
- [自定义服务器控件] 第一步:文本框。
- 检查两个数据库里的表名、字段是否一致的一种方法
- 如何在Python中从零开始实现随机森林
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Swagger 3.0 官方 starter 诞生了,其它的都可以扔了~
- 原码+反码+补码概述与示范
- HTTP客户端连接,选择HttpClient还是OkHttp?
- 数据类型(基本数据类型和引用数据类型)范围与字符转换,代码示例+个位十位百位相加面试题
- Scanner关键字的使用+代码介绍+注意事项
- 将一个txt文件,复制到另一个txt文件中(缓冲字节流(BufferedInputStream,BufferedOutputStream))
- java实现客户端服务端互发消息并接收
- 使用NIO实现非阻塞式(相对的)多人聊天室
- 三次握手与四次挥手+图解
- 单例模式-->饿汉式+懒汉式
- 非常有必要了解的Springboot启动扩展点
- 冒泡排序图解+代码示例
- 使用prepareStatement连接数据库实现增、删、改、查
- 插入排序图解与代码示例
- 初步使用Druid连接池+代码示例:对图书进行增删改查