uniapp/vue如何实现一个子表单及子表单作用-阿里云开发者社区

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

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

定义与特点

定义：子表单是一个插入到主表单中的表单，用于在主表单中显示与主记录相关联的多个辅助记录或数据项。
特点：

提高表单的灵活性和信息的详细程度。
适用于1:N（一对多）的数据场景。
可以包含多种字段类型，如文本框、日期时间、单选框等。

应用场景

销售部门：

子表单可用于使联系人详细信息与客户相关联。
在销售订单中，子表单可以记录与主产品相关联的配件信息，如配件名称、价格、数量等。

人力资源管理：

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

财务管理：

在报销表单中，子表单可以详细记录每次报销包含的多个报销项目信息。

库存管理：

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

功能与优势

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

创建与配置

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

选择主表单

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

添加子表单

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

配置子表单

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

扩展样式设置

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

导出源码

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

本地开发运行效果

保存源码至本地后，会生成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>

注意事项

在使用子表单时，需要注意数据的完整性和准确性，避免出现数据冗余或错误。

根据实际需求合理配置子表单的字段和关联关系，以提高数据处理的效率和准确性。

在进行批量操作时，如批量导入和导出，需要注意数据的格式和顺序，确保数据的正确性和完整性。

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

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