vue 动态增删行，并form表单校验（附v2\v3）

Vue3 组件用的 ant 可以换成你们用，主要是form校验

html 复制代码

前端代码
<a-form
        ref="formRef"
        :model="formData"
        :label-col-props="{ span: 5 }"
        :wrapper-col-props="{ span: 17 }"
    >
      <a-row>
          <a-form-item
              label="角色单位"
              :rules="[
                    {
                      required: true,
                      message: '请选择角色',
                    },]"
          >
            <a-row>
              <a-col v-for="(item, index) in formData.arr" :key="index">
                <a-space>
                  <a-form-item
                      hide-label
                      :field="`arr.${index}.roleId`"
                      :rules="[
                    {
                      required: true,
                      message: '请选择角色',
                    },
                  ]"
                  >
                    <a-select v-model="item.roleId" placeholder="请选择角色" style="width: 150px">
                      <a-option
                          v-for="it in roleList"
                          :key="it.id"
                          :value="it.id"
                      >
                        {{ it.roleName }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item
                    hide-label
                    :field="`arr.${index}.deptIds`"
                    :rules="[
                    {
                      required: true,
                      message: '请选择部门',
                    },
                  ]"
                  >
                    <a-tree-select
                        v-model="item.deptIds"
                        :multiple="true"
                        :allow-clear="true"
                        :allow-search="true"
                        :data="deptList"
                        :field-names="{ key: 'id', title: 'name' }"
                        placeholder="请选择部门"
                        style="width: 300px"
                    ></a-tree-select>
                  </a-form-item>
                </a-space>
                <a-button @click="xx" type="text">
                  增加
                </a-button>
                <a-button @click="zz(index)" type="text">
                  删除
                </a-button>
              </a-col>
            </a-row>
          </a-form-item>
      </a-row>
    </a-form>
js 方法
const formRef = ref(); // 校验
const formData = ref({ // form 对象
	arr: [{
		roleId: '',
    	deptIds: []
	}] // 无限增加的数组
}); 

// 新增一行
const xx = () => {
  formData.value.arr.push({
    roleId: '',
    deptIds: []
  })
}
// 删除一行
const zz = (index:any) => {
  formData.value.arr.splice(index, 1)
}

// 点击确定按钮 提交之类的  先在校验一次
const submit11 = () =>{
	const validateRes = await formRef.value?.validate();
  	if (validateRes) return;
  	// 通过后这里自己的逻辑
}

vue2的

html 复制代码

<a-form-model
          :model="form2"
          ref="ruleForm"
        >
          <a-table :columns="columns" :dataSource="form2.outDetailVOList" bordered>
            <template #outNumber='text, record, index'>
              <a-form-model-item
                :prop="'outDetailVOList.' + index + '.outNumber'"
                :rules="{
                  required: true,
                  message: '请填写出库量',
                  trigger: 'blur',
                }"
                :disabled="action === 'info' "
              >
                <a-input
                  v-model="form2.outDetailVOList[index].outNumber"
                  :disabled="action === 'info' "
                  placeholder="请填写出库量"
                  type='number'
                />
              </a-form-model-item>
            </template>
           
            <template #action='text, record, index' >
              <a v-if="action === 'add' " @click='delCommodity(index)'>删除</a>
            </template>
          </a-table>
        </a-form-model>
const columns = [
  {
    title: '领取出库数量',
    dataIndex: 'outNumber',
    width: '200px',
    scopedSlots: { customRender: 'outNumber' }
  }
]

data () {
    return {
      form2: {
        outDetailVOList: [
          {
            outNumber: ''
          }
          ]
      },
    }
  },


// 删除商品
    delCommodity (index) {
      console.log('', index)
      // if (this.form2.outDetailVOList.length > 1) {
        this.form2.outDetailVOList.splice(index, 1)
      // }
    },

//  在你的提交方法里加 校验
this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          console.log('error submit!!没通过校验')
          return false
        }
      })