ant-desin-vue 표 내부 필드 검증 기능 구현

표 안에 column 이 입력 할 수 있 는 수 요 는 흔히 볼 수 있 습 니 다.특히 일부 업무 장면 은 폼 내부 에 표 가 있 고 그 다음 에 표 의 일부 열 은 입력 을 하 는 것 입 니 다.아래 와 같 습 니 다.
주문 수량 내용 이 비어 있 으 면 안 됩 니 다주문 수량 은 반드시 정정 수 를 입력 해 야 한다
ant-design-vue 홈 페이지 를 뒤 져 보 니 폼 내 표 필드 검증 방안 은 발견 되 지 않 았 으 나 폼 데 이 터 를 자체 적 으로 처리 하 는 소개 가 있 습 니 다.

그럼 우 리 는 이 방안 을 참고 하여 우리 자신의 업무 수 요 를 실현 할 수 있 습 니까?다음은 실현 방안 을 말씀 드 리 겠 습 니 다.

<a-table
 :columns="columns"
 bordered
 :rowKey="col => col.id"
 :dataSource="tableData"
>

 <a-form-item 
  :label-col="{
   xs: { span: 0 },
   sm: { span: 0 },
  }"
  :wrapper-col="{
   xs: { span: 24 },
   sm: { span: 24 },
  }"
  :validate-status="getFildStatus(record.id).validateStatus"
  :help="getFildStatus(record.id).errorMsg"
  slot="goodModelCount" 
  slot-scope="text, record">
  <a-input
   style="width: 100%"
   :min="1"
   v-model="text.goodModelCount"
   @change="handleChange(text.goodModelCount, record.id)"
  />
 </a-form-item>

 <div slot="action" slot-scope="text, record">
  <a href="javascript:;" rel="external nofollow" ><a-icon type="delete" /></a>
 </div>
</a-table>

<script>
const columns = [
 { title: '    ', dataIndex: 'id', align: 'center' },
 { title: '    ', dataIndex: 'account', align: 'center' },
 { title: '    ', dataIndex: 'area', align: 'center' },
 { title: '    ', key: 'goodModelCount', align: 'center', width: '200px', scopedSlots: { customRender: 'goodModelCount' }, align: 'center', },
 { title: '  ', scopedSlots: { customRender: 'action' }, width: '150px', align: 'center',}
]

function validatePrimeNumber(number) {
 if (/^[1-9]\d*|0$/.test(number)) {
  return {
   validateStatus: 'success',
   errorMsg: '',
  };
 }
 return {
  validateStatus: 'error',
  errorMsg: '        ',
 };
}
export default {
 name: 'order-dialog',
 data() {
  return {
   visible: true,
   labelCol: {
    xs: { span: 24 },
    sm: { span: 7 },
   },
   wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
   },
   form: this.$form.createForm(this),
   validatorRules: {
    consigneeName: {
     rules: [
      { required: true, message: '        ' }
     ]
    },
    consigneePhone: {
     rules: [
      { required: true, message: '          ' }
     ]
    },
    addresseeAddressDetail: {
     rules: [
      { required: true, message: '         ' }
     ]
    }
   },
   columns: columns,
   tableData: [{ id: 1, account: 123, area: 123, goodModelCount: 3434}, { id: 2, account: 123, area: 123, goodModelCount: 111}],
   goodModelCountData: []
  }
 },
 methods: {
  getFildStatus(id) {
   const data = this.goodModelCountData.filter(item => id === item.id)[0]
   if (data) {
    return data
   } else {
    return {
     errorMsg: '',
     validateStatus: 'success'
    }
   }
  },

  handleChange(value, id) {
   const newData = [...this.tableData];
   const target = newData.filter(item => item.id === id)[0]
   if (target) {
    const { errorMsg, validateStatus } = validatePrimeNumber(value)
    let flag = true
    this.goodModelCountData.forEach(val => {
     if (val.id === id) {
      flag = false
      val.errorMsg = errorMsg,
      val.validateStatus = validateStatus
     }
    })

    if (flag) {
     this.goodModelCountData.push({
      id,
      errorMsg,
      validateStatus
     })
    }
    target.goodModelCount = value
    this.tableData = newData
   }
  },
  handleOk() {
   this.visible = false
  }
 }
}
</script>

중점 주의 두 속성:
vaidate-status 검사 상태,'성공','warning','error','vaidating'을 선택 할 수 있 습 니 다.
help 설정 검사 문안
vue 에 서 는 속성 에서 함수 형식 으로 속성 을 되 돌려 줄 수 있 기 때문에 검증 규칙 을 함수 에 넣 을 수 있 습 니 다.vaidate Prime Number(함수 이름 은 의미 화 를 명확 하 게 하 는 것 이 좋 습 니 다.제 가 직접 복사 한 공식 문서 에 있 습 니 다)
검증 이 필요 한 필드(a-table 탭 내부 에 있어 야 함)

<a-form-item 
 :label-col="{
  xs: { span: 0 },
  sm: { span: 0 },
 }"
 :wrapper-col="{
  xs: { span: 24 },
  sm: { span: 24 },
 }"
 :validate-status="getFildStatus(record.id).validateStatus"
 :help="getFildStatus(record.id).errorMsg"
 slot="goodModelCount" 
 slot-scope="text, record">
 <a-input
  style="width: 100%"
  :min="1"
  v-model="text.goodModelCount"
  @change="handleChange(text.goodModelCount, record.id)"
 />
</a-form-item>

입력 상 자 를 입력 할 때 handle Change 방법 을 출발 합 니 다.방법 에서 입력 내용 을 검증 한 다음 id 에 따라 getFildStatus 에서 현재 대상 을 찾 아 검증 합 니 다.
목록 에 여러 열 이 검증 되 어야 한다 면 주요 데이터 형식 이 어떻게 정 해 졌 는 지 실제 수요 에 따라 참고 해 야 합 니 다.
총결산
위 에서 말 한 것 은 소 편 이 소개 한 ant-design-vue 가 표 내부 필드 검증 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!