iview-form内table修改字段效验

场景：使用iview-ui，form表单内嵌table支持编辑，对某个字段进行单独效验

3.gif

页面中form表单中包含的table，table的columns使用render函数进行渲染，本身form表单有多条数据进行效验，编辑表格内容时单独对某个input框进行效验。
将表格内效验的条件也写在form的rules 内，表格render函数渲染input时，使用form-item包裹，并填写prop，作为表单中的一项可调用效验，需在data中提前声明。(注意：同时效验多行同一个字段可能会出错)

data(){
  const validateMobile = (rule, value, callback) => {
     if(!this.isMobile(value)) {
      callback(new Error('手机格式错误'))
     } else {
      callback()
     }
   }
  return {
    ruleValidate: {
      applyMatters:[{required: true, message: '请填写备注', trigger: 'change'}],
      deviceTel: [{required: true, validator: validateMobile, trigger: 'blur'}]
    }
  },
  formValidate: {
    inputValue: '',
    deviceTel: ''
  },
  tableColumns: [
    {
      title: '手机号',
      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新增时先对form 内容进行部分效验
this.$refs['formValidate'].validate((valid) => {})
table 编辑 input 失去焦点时再次触发form表单效验

日常记录，有错误or优化，请指出不胜感谢！