更新记录

1.0.4（2024-05-22） 下载此版本

引入TfFormBar

1.0.3（2024-05-22） 下载此版本

完善readme

1.0.2（2024-05-22） 下载此版本

上传组件封面

平台兼容性

tf-multiple-forms

1. 组件作用
   • 根据json数据生成多表体表单组件
   • 由于组件依赖tf-general-forms，tf-modal，tf-picker-date-time，tf-remark-not-form，tf-img-upload，tf-thousand-input，tf-thousand-money-input,tf-form-bar在使用此组件前，请先将以上组件导入项目中，以免影响使用。
2. 组件引用例子

<template>
  <view class="content">
    <TfMultipleForms
     :curIndex="curIndex" 
     ref="tfMultipleForms" 
     v-model="formList"
     @selectChange="selectChange"
     @add="add"
     @copy="copy"
     @deleteForm="deleteForm"
     ></TfMultipleForms>
    <u-button class="subform" type="primary" shape="circle"  @click="sub">提交表单</u-button>
  </view>
</template>

<script>
import TfMultipleForms from "@/uni_modules/tf-multiple-forms/components/tf-multiple-forms/tf-multiple-forms.vue";
export default {
  components: {
    TfMultipleForms,
  },
  data() {
    return {
        curIndex:0,
        // formList数据项格式请参照下方格式，更多类型可参照tf-general-forms组件数据项类型
        formList:[
            [
                {
                  label: "年龄",//表单label，必要属性
                  fieldType: "radio",//字段类型，必要属性
                  disabled:false,//是否禁用，必要属性
                  show: true,//控制是否显示此字段，必要属性
                  list: [//单选数据列表，fieldType为radio或checkbox时必要
                    {
                      value: 1,
                      label: "15岁以下"
                    },
                    {
                      value: 2,
                      label: "16~20岁"
                    }

                  ],
                  rules: {//校验规则，必要属性
                    name: "age",//字段键，必要属性
                    value: '', // 字段值，必要属性
                    verify: true,//是否必填，必要属性
                    errMess: "请选择年龄段",//校验必填失败提示，设置verify为true时必要
                    showErrMess:false //校验文字提示
                  },
                },
                {
                  placeholder: "请输入备注",
                  label: "备注1",
                  fieldType: "textarea",
                  show: true,
                  disabled: false,
                  rules: {
                    name: "experience",
                    value: "备注回显", 
                    verify: true,
                    errMess: "请输入备注",
                    showErrMess:false //校验文字提示
                  },
                },
            ]
        ]
    };
  },
  methods: {
    // 提交表单
    //提交时，按照此模板校验表单即可
   async sub() {
        let tempFormList = [];
        for (let index = 0; index < this.formList.length; index++) {
          try {
            let form = await this.$refs.tfMultipleForms.$refs[`forms${index}`][0].validate();
            tempFormList.push(form);
          } catch (err) {
              this.curIndex = index;
              uni.showToast({
                title:`请完善表单${index + 1}信息后重试`,
                icon:'none'
              })
            return; // 如果某个表单校验失败，则终止后续的校验
          }
        }
        console.log('所有表单校验通过:', tempFormList);
    },
    //切换表单事件
    selectChange(index){
         this.curIndex = index;
    },
    //新增
    add(){
        this.formList.push(
         [
          {
            placeholder: "输入名字",
            label: "姓名",
            fieldType: "input",
            show: true,
            disabled: false,
            rules: {
              name: "name",
              value: "",
              verify: false,
              errMess: "姓名未填写",
              showErrMess:false
            },
          }
         ]
        )
       this.curIndex = this.formList.length - 1;
    },
    //复制
    copy(){
        // 复制时需要深克隆当前被复制项
        let copyItem =  JSON.parse(JSON.stringify(this.formList[this.curIndex]))
        this.formList.push(copyItem)
        this.curIndex = this.formList.length - 1;
    },
    //删除
    deleteForm(index) {
        this.formList.splice(index, 1);
        if (index === this.curIndex) {
        this.curIndex = Math.max(index - 1, 0);
        } else if (index < this.curIndex) {
        this.curIndex -= 1;
        }
    }
  },
};
</script>

<style lang="less">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.subform{
    margin-top: 40rpx;
    background-color: #085699;
    border: 0;
}
</style>

3. 组件属性说明

4. 组件方法说明