vue3.0动态表单+表单验证_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框，可以根据自己的需求稍作修改，原理都是一样的。具体请见代码中的关键部分，其他部分作为参考即可。