uniapp/vue如何实现一个子表单及子表单作用

子表单是一个辅助表单或一个表,它允许在主表单中添加多个行式项目,以处理与主记录相关联的多个辅助项目或数据。子表单在多种应用场景中发挥着重要作用,特别是在需要处理一对多关系的数据时。

以下是对子表单的详细解析:

定义与特点

  • 定义:子表单是一个插入到主表单中的表单,用于在主表单中显示与主记录相关联的多个辅助记录或数据项。
  • 特点:
    • 提高表单的灵活性和信息的详细程度。
    • 适用于1:N(一对多)的数据场景。
    • 可以包含多种字段类型,如文本框、日期时间、单选框等。

应用场景

  1. 销售部门:

    • 子表单可用于使联系人详细信息与客户相关联。
    • 在销售订单中,子表单可以记录与主产品相关联的配件信息,如配件名称、价格、数量等。
  2. 人力资源管理:

    • 子表单可用于管理员工的多个联系人信息、工作经历、培训历史等。
    • 在员工信息表单中,子表单可以记录员工的工作经历、培训记录、证书等详细信息。
  3. 财务管理:

    • 在报销表单中,子表单可以详细记录每次报销包含的多个报销项目信息。
  4. 库存管理:

    • 出库单、入库单中的商品明细可以用子表单记录,根据实际需要录入的数据新增条数。

功能与优势

  • 数据录入:支持多种字段类型,方便用户录入复杂数据。
  • 数据管理:可以有效地处理复杂的数据关系,提高数据录入的准确性和效率。
  • 数据联动:当其他表单字段与子表单字段相关时,可以设置联动,实现数据的自动填充。
  • 批量操作:支持子表信息的批量导入和导出,提高数据处理效率。

创建与配置

子表单的创建和配置通常依赖于具体的软件或平台。以下是一些通用的步骤:

选择主表单

首先确定主表单,往主表单拖入相关表单输入字段并设置其属性,如字段类型、名称、是否必填等。

添加子表单

往主表单中添加子表单组件,并设置其属性,如字段类型、名称、是否必填等。

配置子表单

在子表单字段中配置需要显示的辅助记录或数据项,如配件名称、价格、数量等。

扩展样式设置

对整个子表单进行外边距设置、边框、圆角等设置

导出源码

点击保存源码至本地,本地可以快速进行调试子表单效果。

本地开发运行效果

保存源码至本地后,会生成uniapp、vue相关子表单源码,此时我们可以快速看见效果.

操作按钮位置设置

自定义操作按钮

支持自定义扩展按钮,可以根据生成上面点击事件拷贝出来,然后自定义操作按钮事件。

子表单代码生成器举例

<template><view class="container container21094"><u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24"><u-form-item class="diygw-col-24" label="标题" prop="input"><u-input :focus="formData.inputFocus" placeholder="请输入提示信息" v-model="form.input"></u-input></u-form-item><u-form-item class="diygw-col-24" label="标题" prop="input1"><u-input :focus="formData.input1Focus" placeholder="请输入提示信息" v-model="form.input1"></u-input></u-form-item><view class="flex flex-wrap diygw-col-24 subform-clz"><view class="diygw-col-24" v-for="(subformItem, subformIndex) in form.subform" :key="subformIndex"><u-form class="diygw-col-24" :model="form.subform[subformIndex]" :errorType="['message', 'toast']" ref="subformRef" :rules="subformItemRules"><text class="diygw-col-24 text-clz"> 子表单 </text><u-form-item class="diygw-col-24" label="标题" prop="input3"><u-input :focus="formData.subformItemDatas[subformIndex].input3Focus" placeholder="请输入提示信息" v-model="subformItem.input3"></u-input></u-form-item></u-form><view class="formsubformtools flex justify-end"><button @tap="upSubformItem" :data-index="subformIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-fold"></text></button><button @tap="downSubformItem" :data-index="subformIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-unfold"></text></button><button @tap="addSubformItem" :data-index="subformIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-add"></text></button><button @tap="delSubformItem" :data-index="subformIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-close"></text></button></view></view><view class="padding-xs diygw-col-24"><button @tap="addSubformItem" class="diygw-btn diygw-col-24 radius" style="background: #07c160; color: #fff">新增</button></view></view></u-form><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: { logintype: '0', agree: '0' },subformItemData: {input3Focus: false},subformItem: {input3: ''},form: {input: '',input1: '',subform: []},formRules: {},subformItemRules: {},formData: {inputFocus: false,input1Focus: false,subformItemDatas: []}};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},onReady() {this.$refs.formRef?.setRules(this.formRules);this.initSubformData();},methods: {async init() {await this.initResetform();}, //初始化显示子表单数据条数initSubformData() {for (let i = 0; i < 1; i++) {this.form.subform.push(JSON.parse(JSON.stringify(this.subformItem)));this.formData.subformItemDatas.push(JSON.parse(JSON.stringify(this.subformItemData)));}this.initSubformValid();},//子表单验证initSubformValid() {this.$nextTick(() => {this.$refs['subformRef']?.forEach((subform) => {subform.setRules(this.subformItemRules);});});},//上移子表单upSubformItem(evt) {let { index } = evt.currentTarget.dataset;if (index == 0) {this.navigateTo({type: 'tip',tip: '已经是第一个'});return false;}this.form.subform[index] = this.form.subform.splice(index - 1, 1, this.form.subform[index])[0];this.formData.subformItemDatas[index] = this.formData.subformItemDatas.splice(index - 1, 1, this.formData.subformItemDatas[index])[0];this.initSubformValid();},//下移子表单downSubformItem(evt) {let { index } = evt.currentTarget.dataset;if (index == this.form.subform.length - 1) {this.navigateTo({type: 'tip',tip: '已经是最后一个'});return false;}this.form.subform[index] = this.form.subform.splice(index + 1, 1, this.form.subform[index])[0];this.formData.subformItemDatas[index] = this.formData.subformItemDatas.splice(index + 1, 1, this.formData.subformItemDatas[index])[0];this.initSubformValid();},//删除子表单delSubformItem(evt) {let { index } = evt.currentTarget.dataset;this.form.subform.splice(index, 1);this.formData.subformItemDatas.splice(index, 1);this.initSubformValid();},//增加子表单addSubformItem() {this.form.subform.push(JSON.parse(JSON.stringify(this.subformItem)));this.formData.subformItemDatas.push(JSON.parse(JSON.stringify(this.subformItemData)));this.initSubformValid();},//验证所有的子表单checkSubformValid() {let flag = true;this.$refs['subformRef']?.forEach((subform) => {subform.validate((valid) => {if (!valid) {flag = false;return false;}});});return flag;},initResetform() {this.initform = JSON.stringify(this.form);},resetForm() {this.form = JSON.parse(this.initform);},async submitForm(e) {this.$refs.formRef?.setRules(this.formRules);this.initSubformValid();this.$nextTick(async () => {let subformvalid = await this.checkSubformValid();let valid = await this.$refs.formRef.validate();if (valid && subformvalid) {//保存数据let param = this.form;let header = {'Content-Type': 'application/json'};let url = '';if (!url) {this.showToast('请先配置表单提交地址', 'none');return false;}let res = await this.$http.post(url, param, header, 'json');if (res.code == 200) {this.showToast(res.msg, 'success');} else {this.showModal(res.msg, '提示', false);}} else {console.log('验证失败');}});}}};
</script><style lang="scss" scoped>.subform-clz {margin-left: 10rpx;border: 2rpx solid #ac0a0a;border-bottom-left-radius: 12rpx;overflow: hidden;width: calc(100% - 10rpx - 10rpx) !important;border-top-left-radius: 12rpx;margin-top: 10rpx;border-top-right-radius: 12rpx;border-bottom-right-radius: 12rpx;margin-bottom: 10rpx;margin-right: 10rpx;}.formsubformtools {position: absolute;z-index: 1;right: 0rpx;top: 0rpx;}.formsubformtools .diygw-btn {padding: 5px;height: auto;flex: inherit;border-radius: 20px;}.text-clz {margin-left: 10rpx;padding-top: 10rpx;padding-left: 10rpx;width: calc(100% - 10rpx - 10rpx) !important;padding-bottom: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;margin-right: 10rpx;padding-right: 10rpx;}.container21094 {}
</style>

注意事项

  • 在使用子表单时,需要注意数据的完整性和准确性,避免出现数据冗余或错误。
  • 根据实际需求合理配置子表单的字段和关联关系,以提高数据处理的效率和准确性。
  • 在进行批量操作时,如批量导入和导出,需要注意数据的格式和顺序,确保数据的正确性和完整性。

综上所述,子表单是一种重要的数据管理工具,能够有效地处理复杂的数据关系和提高数据处理的效率。在实际应用中,需要根据具体需求合理配置和使用子表单。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/52292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nvm安装node找不到版本问题(只有iojs)

&#x1f506; 背景 很久没有使用nvm新安装node版本了&#xff0c;今天在切换时执行 nvm install 要执行很久&#xff0c;然后返回暂无当前版本的错误信息&#xff0c;那就执行 nvm ls-remote 看一下远程的版本&#xff0c;发现返回的只有iojs的版本&#xff0c;没有node版本&…

90%的设计师都不知道的免抠图素材插件,水花免抠png素材轻松搞定!附保姆教程

你是否曾在设计中为绘制那些晶莹剔透的水花而苦恼&#xff1f;用PS太麻烦&#xff0c;细节根本抠不清楚&#xff1b;去素材网找&#xff0c;不是付费太高就是图案不满意&#xff01;可以试试千鹿设计助手的“AI免抠生成”插件&#xff0c;接下来我来分享一下我的一些使用过程和…

LeetCode 3133.数组最后一个元素的最小值:位运算+双指针

【LetMeFly】3133.数组最后一个元素的最小值&#xff1a;位运算双指针 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-array-end/ 给你两个整数 n 和 x 。你需要构造一个长度为 n 的 正整数 数组 nums &#xff0c;对于所有 0 < i < n - 1 &#xff0…

ardupilot开发 --- C嘎嘎 篇

长生不老&#xff1f;三界六道不就毁在这4个字上&#xff1f; 溜撒点一起上吧 cout和cin的使用&#xff0c;标准输入输出<< 和 >> 的使用数据类型&#xff08;函数&#xff09;模板的使用&#xff1a;命名空间的使用&#xff0c;std命名空间语句块new 的使用引用 &…

fiddler在软件测试中的使用(详细版)

1.抓包&#xff0c;辅助定位bug&#xff08;web中类似谷歌浏览器F12开发调试工具&#xff09; 合格的软件测试工程师&#xff0c;不仅仅需要能够发现bug&#xff0c;还需要能透过bug表象&#xff0c;分析出问题根本原因&#xff0c;从而提升bug的解决效率&#xff0c;通过fidd…

微信小程序记录(持续更新)

1.登录相关 登录简单来说就是用uni.login获取登陆凭证code。然后调用后台登录接口传递给后台&#xff0c;后台解码再返回token等一系列信息给前端 参考地址&#xff1a; 微信小程序获取用户手机号码教程&#xff08;前端后端&#xff09;_微信小程序获取手机号-CSDN博客 代码…

【pytorch】固定(freeze)住部分网络

https://blog.csdn.net/jningwei/article/details/120300014 如果使用过了FSDP架构&#xff0c;需要使用pytorch2.0以上的版本。 use_orig_paramstrue ignored_parameters[param for param in model.parameters() if not param.requires_grad] # 如果是2.1.0以上版本&#xf…

Qt音视频处理类有这些

Qt 提供了一系列音视频处理的类&#xff0c;这些类可以帮助开发者实现音视频的播放、录制、编解码等功能。以下是 Qt 中一些主要的音视频类&#xff1a; QMediaPlayer: 用于播放音频和视频的类&#xff0c;支持多种媒体格式&#xff0c;可以控制播放、暂停、停止等基本操作 。…

手机使用技巧:如何恢复Android手机不见的短信

在您的 Android 手机上丢失短信可能是一种令人沮丧的经历&#xff0c;尤其是在文本包含重要信息的情况下。幸运的是&#xff0c;有一些方法可以在Android上恢复已删除的短信。在这篇博文中&#xff0c;我们将讨论几种在Android手机上恢复已删除短信的方法。 为什么需要恢复Andr…

vue2版本空目录下创建新项目的方法2024

vue2版本空目录下创建新项目的方法2024 node -v npm -v vue -V 安装vue-cli 2.9版本的命令 npm install vue-cli -g 卸载vue2.x方法&#xff1a; npm uninstall vue-cli -g 设置 NPM 镜像 npm config set registry https://registry.npmmirror.com vue -V 报错时需设置环…

JVM的内存模型和垃圾回收

JVM内存区域 内存模型图&#xff1a; 堆 线程共享。所有的对象实例以及数组都要在堆上分配。回收器主要管理的对象。 它的目的是存放对象实例。同时它也是GC所管理的主要区域&#xff0c;因此常被称为GC堆&#xff0c;又由于现在收集器常使用分代算法&#xff0c;Java堆中还…

【Spring Cloud】Consul

官网介绍: Spring Cloud Consul该项目为Spring Boot应用程序提供了与Consul的集成,通过自动配置和绑定到Spring环境以及其他Spring编程模型习语。通过几个简单的注解,您可以在应用程序内部快速启用和配置常见模式,并使用基于Consul的组件构建大型分布式系统。提供的模式包括…

【网络编程】第十一章 数据链路层 - 以太网(MAC+MTU+ARP+MSS+RARP)

文章目录 重点链路层以太网MAC帧格式碰撞域MAC地址MAC地址和IP地址 MTU-最大传输单元MTU 对 IP 的影响MTU 对 UDP 的影响MTU 对 TCP 的影响-MSS ARP协议ARP协议的工作流程ARP请求的过程ARP应答的过程 ARP 缓存中间人攻击 RARP协议 重点 数据链路层的作用&#xff1a;两个设备 …

如何解决大数据背景下的数据治理挑战

在大数据背景下&#xff0c;数据治理面临着诸多挑战&#xff0c;这些挑战涵盖了数据的复杂性、安全性、合规性、技术选择、文化和组织变革等多个方面。为了有效解决这些挑战&#xff0c;可以从以下几个方面入手&#xff1a; 一、明确数据治理目标和策略 与业务战略紧密结合&a…

虚幻5|AI视力系统,听力系统,预测系统(2)听力系统

虚幻5|AI视力系统&#xff0c;听力系统&#xff0c;预测系统&#xff08;1&#xff09;视力系统-CSDN博客 一&#xff0c;把之前的听力系统&#xff0c;折叠成函数&#xff0c;复制粘贴一份改名为听力系统 1.小个体修改如下&#xff0c;把之前的视力系统改成听力系统 2.整体修…

解决Jasper Studio预览无数据源的问题:在Dataset and Query里面预览数据为空,但是浏览器访问接口,是存在数据的。

目录 1.1、错误描述 1.2、解决方案 1.1、错误描述 最近接触Jasper Studio报表开发比较多一些&#xff0c;遇到了很多的问题&#xff0c;其中有一个问题就是&#xff1a;在Jasper Studio中的Dataset and query里面预览数据&#xff0c;发现是空的&#xff0c;如下图所示&…

数据仓库ETL开发

在企业数字化转型的过程中&#xff0c;数据仓库已经成为了企业管理和决策的重要工具。数据仓库ETL开发是构建数据仓库的关键步骤之一&#xff0c;它可以帮助企业从源系统中抽取、清洗、转换和整合数据&#xff0c;方便企业进行管理和分析。本文将介绍如何高效实现数据仓库ETL开…

媒体服务zlmediakit系统架构图

1. 整体系统架构图 (Overall System Architecture Diagram) 描述: 整体系统架构图展示了ZLMediaKit的主要组件及其交互方式&#xff0c;包含流媒体接入、处理、存储和分发等主要流程。 样例图: ------------------------------------------ | 客户端 (Clients…

【功能自动化】WebTours:使用unittest编写注册测试用例

环境搭建&#xff1a; 需要配置WebTours网站 代码实现&#xff1a; # 导入包 from selenium import webdriver from selenium.webdriver.support.select import Select from time import sleep import unittestdriver None class Reg(unittest.TestCase):classmethoddef se…

Spring底层机制环境搭建

文章目录 1.模块创建和依赖引入1.聚合模块&#xff0c;下面有一个myspring2.查看父模块是否管理了子模块3.myspring模块引入基本包 2.进行环境搭建1.目录概览2.UserController.java3.UserService.java4.UserDao.java5.AppMain.java6.beans.xml7.测试8.配置UserController.java为…