antd+vue3对循环的表单控件添加自定义校验

对循环的表单控件添加自定义校验

 

效果如下：

 

 

 

 代码如下：

<template>
  <a-form ref="formRef" :model="modelRef" v-bind="outLayout" class="layout">
    <a-form-item
      v-for="(domain, index) in modelRef.domains"
      :key="domain.key"
      v-bind="itemLayout"
      :label="'步骤' + (index + 1)"
      :name="['domains', index, 'value']"
      :rules="[
        {
          required: true,
          message: '步骤内容不能为空',
        },
        {
          max: 200,
          message: '最多输入200字，请重新输入',
        },
      ]"
    >
      <a-textarea
        v-model:value.trim="domain.value"
        placeholder="请输入(200字以内)"
        style="width: 50%; margin-right: 8px"
      />
      <MinusCircleOutlined
        v-if="modelRef.domains.length > 1"
        class="dynamic-delete-button"
        :disabled="modelRef.domains.length === 1"
        @click="removeDomain(domain)"
      />
    </a-form-item>
    <a-form-item v-bind="outLayout">
      <a-button type="dashed" style="width: 55%" @click="addDomain">
        <PlusOutlined />
        新增步骤
      </a-button>
    </a-form-item>

    <a-button class="hidden" @click="onSubmit" />
  </a-form>
</template>
<script>
import { reactive, toRefs, watch } from 'vue'
import { cloneDeep } from 'lodash'
import { shareState } from './model'

export default {
  setup() {
    const state = reactive({
      formRef: null, 53       itemLayout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 15 },
      },
      outLayout: {
        wrapperCol: {
          span: 14,
          offset: 2,
        },
      },
    })
    const modelRef = reactive({
      domains: [],
    })

　　　　　// 初始化 控件值
    const initData = async () => {
      const data = cloneDeep(shareState.formData.recipeStepList)
      modelRef.domains = data.map(v => {
        return { value: v, key: Date.now() + Math.random() }
      })
    }

    watch(
      () => shareState.formData,
      val => {
        if (val) initData()
      },
      { deep: true, immediate: true },
    )

　　　　　// 删除输入框
    const removeDomain = item => {
      const index = modelRef.domains.indexOf(item)
      if (index !== -1) {
        modelRef.domains.splice(index, 1)
      }
    }

　　　　　// 添加输入框
    const addDomain = () => {
      modelRef.domains.push({
        value: null,
        key: Date.now() + Math.random(),
      })
    }

　　　　　// 由于此模块作为组件被引入到其他页面(父组件)，父组件有一个统一的保存按钮，点击此按钮时触发该onSubmit事件，以此校验该表单是否填写正确
    const onSubmit = () => {
      return state.formRef
        .validate()
        .then(() => {
          const arr = modelRef.domains.map(v => v.value)
          const data = arr.join('#')
          return Promise.resolve(data)
        })
        .catch(error => {
          return Promise.reject(new Error(error))
        })
    }

    return {
      ...toRefs(state),
      modelRef,
      onSubmit,
      removeDomain,
      addDomain,
    }
  },
}
</script>
<style lang="less" scoped>
.layout {
  .dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }
  .dynamic-delete-button:hover {
    color: #777;
  }145   :deep(.ant-col-offset-2) {
    margin-left: 6.5%;
  }
  :deep(.ant-col-2) {
    max-width: 6.5%;
  }
}
</style>