devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue动态生成form表单+校验_vue动态表单

作者：菜鸟追梦旅行 | 2024-04-17 04:26:39

赞

踩

vue动态表单

1. 定义Form表单组件：

  1. <template>
  2.   <div class="v-form-conatiner">
  3.     <van-cell-group>
  4.       <!-- 自定义cell-group表头 -->
  5.       <template v-if="title" #title>
  6.         <slot name="group-title">
  7.           {{ title }}
  8.         </slot>
  9.       </template>
  10.       <ValidationObserver slim ref="validationObserver">
  11.         <template v-for="item in formModel">
  12.           <!-- 输入框、选择框、日期选择器、文件上传、单选框、复选框等可输入组件渲染 -->
  13.           <ValidationProvider
  14.             v-if="!formModelOptions[item.key + 'Hidden']"
  15.             :key="item.key"
  16.             :name="item.options.label"
  17.             :rules="item.options.rules ? item.options.rules : ''"
  18.             v-slot="{ errors }"
  19.             slim
  20.           >
  21.             <van-cell
  22.               v-if="item.componentType === 'van-cell'"
  23.               :title="item.options.label"
  24.               :value="formData[item.key]"
  25.             />
  26.             <component
  27.               v-else
  28.               :is="item.componentType"
  29.               :ref="`${item.key}`"
  30.               :data="item.options"
  31.               :keyName="item.key"
  32.               v-model="formData[item.key]"
  33.               @changed="changed(item)"
  34.               :error-message="errors[0]"
  35.             />
  36.           </ValidationProvider>
  37.         </template>
  38.       </ValidationObserver>
  39.     </van-cell-group>
  40.   </div>
  41. </template>
  42.  
  43. <script>
  44. import { ValidationProvider } from "vee-validate";
  45. import formItemBase from "./mixins/FormBase";
  46. import VantField from "@/components/common/form/VantField.vue";
  47. import VantPersonal from "@/components/common/form/VantPersonal.vue";
  48. import VantAgent from "@/components/common/form/VantAgent.vue";
  49. import VantRadio from "@/components/common/form/VantRadio.vue";
  50. import VantCheckBox from "@/components/common/form/VantCheckBox.vue";
  51. import VantMultiPicker from "@/components/common/form/VantMultiPicker.vue";
  52. import VantDatetimePicker from "@/components/common/form/VantDatetimePicker.vue";
  53. import VantPicker from "@/components/common/form/VantPicker.vue";
  54. import VantUploader from "@/components/common/form/VantUploader.vue";
  55. import VantUploaderImage from "@/components/common/form/VantUploaderImage.vue";
  56. import VantFormPopup from "@/components/common/form/VantFormPopup.vue";
  57. import VantCalendar from "@/components/common/form/VantCalendar.vue";
  58.  
  59. export default {
  60.   name: "VantForm",
  61.   components: {
  62.     ValidationProvider,
  63.     VantField,
  64.     VantPersonal,
  65.     VantAgent,
  66.     VantRadio,
  67.     VantCheckBox,
  68.     VantMultiPicker,
  69.     VantDatetimePicker,
  70.     VantPicker,
  71.     VantUploader,
  72.     VantUploaderImage,
  73.     VantFormPopup,
  74.     VantCalendar,
  75.   },
  76.   mixins: [formItemBase],
  77.   props: {
  78.     formModel: {
  79.       // 表单初始化数据结构
  80.       type: Array,
  81.       default: function () {
  82.         return [];
  83.       },
  84.     },
  85.     value: {
  86.       // 表单的值
  87.       type: Object,
  88.       default: function () {
  89.         return {};
  90.       },
  91.     },
  92.     title: {
  93.       type: String,
  94.       default: function () {
  95.         return "";
  96.       },
  97.     },
  98.   },
  99.   model: {
  100.     prop: "value",
  101.     event: "changed",
  102.   },
  103.   data() {
  104.     return {
  105.       formData: {}, // 表单绑定的数据
  106.       formModelOptions: {}, // form表单字段配置显示隐藏参数配置
  107.     };
  108.   },
  109.   methods: {
  110.     /**
  111.      * 表单提交函数
  112.      */
  113.     onSubmit() {
  114.       this.$refs.validationObserver.validate().then((success) => {
  115.         // success结果返回布尔值
  116.         if (!success) return;
  117.         // 处理请求
  118.         // this.$emit("success", this.formData);
  119.  
  120.         this.$nextTick(() => {
  121.           // 清除验证状态，需注意值不会清除要自己手动清除
  122.           this.$refs.validationObserver.reset();
  123.         });
  124.       });
  125.     },
  126.     /**
  127.      * 表单校验
  128.      */
  129.     validate() {
  130.       return new Promise((resolve) => {
  131.         this.$refs.validationObserver.validate().then((success) => {
  132.           resolve(success);
  133.           // if (success) {
  134.           //   this.$nextTick(() => {
  135.           //     // 清除验证状态，需注意值不会清除要自己手动清除
  136.           //     window.validationObserver = this.$refs.validationObserver;
  137.           //     this.$refs.validationObserver.reset();
  138.           //   });
  139.           // }
  140.         });
  141.       });
  142.     },
  143.     reset() {
  144.       this.$refs.validationObserver.reset();
  145.     },
  146.     /**
  147.      * 表单值发生改变回调函数
  148.      * item： 表单字段数据模板
  149.      */
  150.     changed(item) {
  151.       this.$emit("formItemChanged", item, this.formData); // 值变更，暴露变化的事件及值，父类中可以处理业务校验等逻辑
  152.       this.$emit("changed", this.formData); // 值变更双向绑定
  153.     },
  154.     /**
  155.      * 动态设置fromData的值，主要用于字段之间的依赖计算
  156.      * name:属性名
  157.      * value: 值
  158.      */
  159.     setFormDataByName(name, value) {
  160.       this.$set(this.formData, name, value);
  161.     },
  162.     /**
  163.      * 动态设置formModelOptions的值，主要用于字段之间联动显示等逻辑控制
  164.      * name + "Hidden" 是动态组装的属性名
  165.      * value对应属性的名字
  166.      */
  167.     setFormModelOptionsByIndex(name, value) {
  168.       this.$set(this.formModelOptions, name + "Hidden", value);
  169.     },
  170.     /**
  171.      * @param {*} fieldName 字段key值
  172.      * @param {*} model form模板
  173.      * @param {*} node form节点
  174.      */
  175.     setFieldToDiabled(fieldName, disabled) {
  176.       let refNode = null;
  177.       if (fieldName) {
  178.         refNode = this.getFieldNode(fieldName);
  179.         if (refNode && refNode.setDisabled) {
  180.           refNode.setDisabled(disabled);
  181.         }
  182.       }
  183.     },
  184.     /**
  185.      * 初始化数据
  186.      */
  187.     initData() {
  188.       let isEdit = false;
  189.       if (!this.$utils.isEmpty(this.value)) {
  190.         isEdit = true;
  191.       }
  192.       // model带{{i18nKey}}资源国家化
  193.       this.handleI18n(this.formModel);
  194.       // 动态给属性form data添加属性，后期作为field控件的v-model的变量
  195.       for (let i = 0; i < this.formModel.length; i++) {
  196.         if (isEdit) {
  197.           // 编辑数据复制
  198.           this.formModel[i].value = this.value[this.formModel[i].key];
  199.         }
  200.         // 组装表格绑定的model
  201.         this.$set(
  202.           this.formData,
  203.           this.formModel[i].key,
  204.           this.formModel[i].value
  205.         );
  206.         /**
  207.          * 字段的配置属性集合
  208.          * 可以配置多个，根据需要进行扩展
  209.          **/
  210.         let formModelItem = this.formModel[i];
  211.  
  212.         // 字段显示控制字段，命名规则：[key]+Hidden
  213.         this.$set(
  214.           this.formModelOptions,
  215.           formModelItem.key + "Hidden",
  216.           formModelItem.options.hidden ? true : false
  217.         );
  218.       }
  219.     },
  220.     /**
  221.      * 返回表单字段的ref引用
  222.      */
  223.     getFieldRefNode(keyName) {
  224.       return this.$refs[keyName];
  225.     },
  226.     /**
  227.      * 返回表单字段的ref引用
  228.      */
  229.     getFieldNode(keyName) {
  230.       let refsNode = this.$refs[keyName];
  231.       return refsNode && refsNode.length ? refsNode[0] : null;
  232.     },
  233.   },
  234.   created() {
  235.     this.initData();
  236.   },
  237.   watch: {
  238.     formModel() {
  239.       this.initData();
  240.     },
  241.     value(newVal, oldVal) {
  242.       console.info(oldVal);
  243.       // 编辑数据，处理数据回填
  244.       if (newVal.isEdit) {
  245.         this.formData = newVal;
  246.       }
  247.       // 数据回填，把编辑状态重置成非编辑状态，必备表单改变，重复处理数据
  248.       this.isEdit = false;
  249.     },
  250.   },
  251. };
  252. </script>
  253. <style scoped lang="less">
  254. .v-form-conatiner {
  255.   font-size: 14px;
  256.   color: #646566;
  257.   text-align: left;
  258. }
  259. .required {
  260.   .van-cell-group__title:before {
  261.     position: absolute;
  262.     left: 2.133333vw;
  263.     color: #ee0a24;
  264.     font-size: 3.733333vw;
  265.     content: "*";
  266.   }
  267. }
  268. .v-cell-title {
  269.   margin: 0;
  270.   padding: 16px 16px 16px;
  271.   color: rgba(69, 90, 100, 0.6);
  272.   font-weight: normal;
  273.   font-size: 14px;
  274.   line-height: 16px;
  275.   background-color: #f7f8fa;
  276. }
  277. </style>

2.form表单子组件：

  1. <script>
  2. import { ValidationProvider } from "vee-validate";
  3. import formItemBase from "./mixins/FormBase";
  4. // 表单子组件
  5. import VantField from "@/components/common/form/VantField.vue";
  6. import VantPersonal from "@/components/common/form/VantPersonal.vue";
  7. import VantAgent from "@/components/common/form/VantAgent.vue";
  8. import VantRadio from "@/components/common/form/VantRadio.vue";
  9. import VantCheckBox from "@/components/common/form/VantCheckBox.vue";
  10. import VantMultiPicker from "@/components/common/form/VantMultiPicker.vue";
  11. import VantDatetimePicker from "@/components/common/form/VantDatetimePicker.vue";
  12. import VantPicker from "@/components/common/form/VantPicker.vue";
  13. import VantUploader from "@/components/common/form/VantUploader.vue";
  14. import VantUploaderImage from "@/components/common/form/VantUploaderImage.vue";
  15. import VantFormPopup from "@/components/common/form/VantFormPopup.vue";
  16. import VantCalendar from "@/components/common/form/VantCalendar.vue";

3.处理校验逻辑：

使用ValidationObserver和ValidationProvider实现校验逻辑

  1. <ValidationObserver slim ref="validationObserver">
  2.         <template v-for="item in formModel">
  3.           <!-- 输入框、选择框、日期选择器、文件上传、单选框、复选框等可输入组件渲染 -->
  4.           <ValidationProvider
  5.             v-if="!formModelOptions[item.key + 'Hidden']"
  6.             :key="item.key"
  7.             :name="item.options.label"
  8.             :rules="item.options.rules ? item.options.rules : ''"
  9.             v-slot="{ errors }"
  10.             slim
  11.           >
  12.             <van-cell
  13.               v-if="item.componentType === 'van-cell'"
  14.               :title="item.options.label"
  15.               :value="formData[item.key]"
  16.             />
  17.             <!-- 动态渲染form表单的子组件 -->
  18.             <component
  19.               v-else
  20.               :is="item.componentType"
  21.               :ref="`${item.key}`"
  22.               :data="item.options"
  23.               :keyName="item.key"
  24.               v-model="formData[item.key]"
  25.               @changed="changed(item)"
  26.               :error-message="errors[0]"
  27.             />
  28.           </ValidationProvider>
  29.         </template>
  30.       </ValidationObserver>

4. 定义form表单Json数据模板

CreateContactModel.js

  1. import {
  2.   getPositionOptions,
  3.   getCustomerPortraitOptions,
  4.   getProjectRoleOptions,
  5. } from "../../../store/constants";
  6.  
  7. export const contactInformationModel = [
  8.   {
  9.     key: "contactName", // 联系人姓名
  10.     componentType: "vant-field",
  11.     value: "",
  12.     options: {
  13.       label: "联系人姓名",
  14.       type: "text",
  15.       placeholder: "{{pleaseInput}}",
  16.       rules: "required",
  17.       required: true,
  18.     },
  19.   },
  20.   {
  21.     key: "contactNumber", // 联系人电话
  22.     componentType: "vant-field",
  23.     value: "",
  24.     options: {
  25.       label: "联系人电话",
  26.       type: "tel",
  27.       placeholder: "{{pleaseInput}}",
  28.       rules: "required|phone",
  29.       required: true,
  30.     },
  31.   },
  32.   {
  33.     key: "department", // 所属部门
  34.     componentType: "vant-field",
  35.     value: "",
  36.     options: {
  37.       label: "所属部门",
  38.       type: "text",
  39.       placeholder: "{{pleaseInput}}",
  40.     },
  41.   },
  42.   {
  43.     key: "position", // 职位
  44.     componentType: "vant-radio",
  45.     value: "",
  46.     options: {
  47.       label: "职位",
  48.       data: getPositionOptions(),
  49.       valueType: "single-dict", // 数据类型
  50.     },
  51.   },
  52.   {
  53.     key: "portrait", // 客户画像
  54.     componentType: "vant-picker",
  55.     value: "",
  56.     options: {
  57.       label: "客户画像",
  58.       placeholder: "{{pleaseSelect}}",
  59.       data: getCustomerPortraitOptions(),
  60.       valueType: "single-dict", // 数据类型
  61.     },
  62.   },
  63.   {
  64.     key: "projectRole", // 项目中角色
  65.     componentType: "vant-multi-picker",
  66.     value: "",
  67.     options: {
  68.       label: "项目中角色",
  69.       placeholder: "{{pleaseSelect}}",
  70.       span: 8,
  71.       data: getProjectRoleOptions(),
  72.       valueType: "multi-dict", // 数据类型
  73.     },
  74.   },
  75. ];

5.动态生成form表单

  1. <template>
  2.   <div class="create-opportunity">
  3. 	<!-- 联系人信息 -->
  4. 	<vant-form
  5. 	  ref="contactInformation"
  6. 	  title="联系人信息（可添加多个联系人）"
  7. 	  :formModel="contactInformationModel"
  8. 	  v-model="contactInformationFormData"
  9. 	  class="required"
  10. 	>
  11. 	</vant-form>
  12. 	<!-- 机会保存-->
  13. 	<van-button
  14. 	  v-if="!isCreateProject"
  15. 	  type="info"
  16. 	  @click="onSubmit"
  17. 	  block
  18. 	  round
  19. 	  >保存</van-button
  20. 	>
  21.   </div>
  22. </template>
  23.  
  24. <script>
  25. import VantForm from "@/components/common/VantForm.vue";
  26. import { contactInformationModel } from "@/components/common/business/CreateContactModel";
  27.  
  28. export default {
  29.   name: "Test",
  30.   components: {
  31.     VantForm,
  32.   },
  33.   data() {
  34.     return {
  35.       //提交表单数据
  36.       preparerInformationFormData: {}, // 联系人信息form表单
  37.       contactInformationModel, // 联系人信息model
  38.     };
  39.   },
  40. };
  41. </script>

效果图：

 校验：

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/438205
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号