更新记录

1.0.4(2024-05-22)

引入TfFormBar

1.0.3(2024-05-22)

完善readme

1.0.2(2024-05-22)

上传组件封面

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × ×

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>
  1. 组件属性说明
属性名 类型 默认值 说明
groupTitle String '标题' 标题文字
num Boolean false 是否显示序号
value Array [] 表体数据
curIndex Number 0 当前激活项
showArrow Boolean true 是否显示收起展开箭头图标
disabled Boolean false 是否禁用整个表单
  1. 组件方法说明
事件名 说明 回调参数
selectChange 切换表体事件 返回当前激活项索引
add 新增 -
copy 复制新增 -
deleteForm 删除事件 删除项索引

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问