場(chǎng)景：使用iview-ui，form表單內(nèi)嵌table支持編輯，對(duì)某個(gè)字段進(jìn)行單獨(dú)效驗(yàn)

3.gif

頁(yè)面中form表單中包含的table，table的columns使用render函數(shù)進(jìn)行渲染，本身form表單有多條數(shù)據(jù)進(jìn)行效驗(yàn)，編輯表格內(nèi)容時(shí)單獨(dú)對(duì)某個(gè)input框進(jìn)行效驗(yàn)。
將表格內(nèi)效驗(yàn)的條件也寫在form的rules 內(nèi)，表格render函數(shù)渲染input時(shí)，使用form-item包裹，并填寫prop，作為表單中的一項(xiàng)可調(diào)用效驗(yàn)，需在data中提前聲明。(注意：同時(shí)效驗(yàn)多行同一個(gè)字段可能會(huì)出錯(cuò))

<template>
  <i-form ：rules="ruleValidate" :model="formValidate">
    <div>
      <form-item prop="applyMatters">
        <i-input v-model="formValidate.inputValue" type="textarea" :rows="4" style="width: 100%" />
      </form-item>
    </div>
    <div>
      <form-item>
        <i-table :columns="tableColumns" :data="tableData" ></i-table>
      </form-item>
    </div>
  </i-form>
</template>

data(){
  const validateMobile = (rule, value, callback) => {
     if(!this.isMobile(value)) {
      callback(new Error('手機(jī)格式錯(cuò)誤'))
     } else {
      callback()
     }
   }
  return {
    ruleValidate: {
      applyMatters:[{required: true, message: '請(qǐng)?zhí)顚憘渥?, trigger: 'change'}],
      deviceTel: [{required: true, validator: validateMobile, trigger: 'blur'}]
    }
  },
  formValidate: {
    inputValue: '',
    deviceTel: ''
  },
  tableColumns: [
    {
      title: '手機(jī)號(hào)',
      key: 'deviceTel',
      minWidth: 140,
      align: 'center',
      render(h, {row, index}){
        let edit
        if(this.editIndex === index) { // 判斷table 指定編輯行
          this.department = row.deviceTel 
          edit = [
            h('FormItem', { // 將table 中修改的input， 作為form 表單中的formItem
              props: {
                prop: 'deviceTel'
              }
            }, [
              h('Input', {
                props: {
                  value: row.deviceTel
                },
                on: {
                  'on-blur': (e) => {
                    this.formValidate.deviceTel = e.target.value
                    this.department = e.target.value
                  }
                }
              })
            ])
          ]
        } else {
          edit = row.deviceTel
        }
        return h('div', [edit])
      }
    }
  ]
},
methods: {
  isMobile(s){
    return /^1[0-9]{10}$/.test(s)
  }
}

在table新增時(shí)先對(duì)form 內(nèi)容進(jìn)行部分效驗(yàn)
this.$refs['formValidate'].validate((valid) => {})
table 編輯 input 失去焦點(diǎn)時(shí)再次觸發(fā)form表單效驗(yàn)

日常記錄，有錯(cuò)誤or優(yōu)化，請(qǐng)指出不勝感謝！