当前位置:   article > 正文

vue3.0动态表单+表单验证_vue3动态表单

vue3动态表单

项目中不乏有用到动态渲染表单的地方,在本人做过的项目里用到的地方还蛮多的,所以就来记录一下,希望对大家有所帮助。
图片一:
在这里插入图片描述

图片二:
在这里插入图片描述

代码如下:

	  <a-form-item label="到达人员">
        <a-tree-select
          v-model:value="idList"
          show-search
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="请选择"
          allow-clear
          multiple
          tree-default-expand-all
          :tree-data="userGroup"
          @change="change"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item
        :label="item.userName"
        has-feedback
        :name="`no${idx}`"
        v-for="(item, idx) in repairersList"
        :key="item.workNo"
      >
        <a-input
          autocomplete="off"
          placeholder="请输入工号后四位进行验证"
          v-model:value="formState[`no${idx}`]"
          @focus="handleGetIndex($event, idx)"  // $event为focus方法自带参数,idx为自定义参数,用于验证输入值是否正确,如果项目里没有这个需求的话可以改成普通的input框
        />
      </a-form-item>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

方法部分:
const formState = ref({});
const rules = ref({}); //formState和rules都需要动态填充
const repairersList = ref([]); // 选中的人员列表,用于循环展示

 function change(val) {
      if (val) {
        let index = 0; 自定义动态属性名时使用
        repairersList.value = [];
        formState.value = {};
        rules.value = {};
        // 上面四行也需要注意,每一次change都需要重置formState和rules,然后重新进行数据处理
        val.map((e) => {
          let wIndex = e.split("-")[0]; // 班组index
          let nIndex = e.split("-")[1]; // 人员在班组中的index
          userGroup.value[wIndex].children.map((ele, idx) => {
            if (idx == nIndex) {
              repairersList.value.push(ele);
              // 动态表单关键实现部分开始
              rules.value[`no${index}`] = [
                {
                  required: true,
                  validator: validateFunc,
                  trigger: "change",
                },
              ];
              formState.value[`no${index}`] = "";
              index++;
              // 动态表单关键实现部分结束
            }
          });
        });
        console.log(rules.value);
        console.log(formState.value);
      }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

我这边用到的是一个treeSelect和带有自定义校验规则的input框,可以根据自己的需求稍作修改,原理都是一样的。具体请见代码中的关键部分,其他部分作为参考即可。

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

闽ICP备14008679号