美文网首页
iview-form内table修改字段效验

iview-form内table修改字段效验

作者: Han涛_ | 来源:发表于2022-03-09 19:15 被阅读0次

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

3.gif

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

<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('手机格式错误'))
     } 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优化,请指出不胜感谢!

相关文章

  • iview-form内table修改字段效验

    场景:使用iview-ui,form表单内嵌table支持编辑,对某个字段进行单独效验 页面中form表单中包含的...

  • MySQL 表的创建语句

    创建表: create table 表名 (字段,字段类型,约束); 修改表名: alter table 原表名 ...

  • MySQL批量修改表字段

    批量修改不为空字段 批量修改为空字段 table_test: 表名project_id: 要修改的字段form: ...

  • 修改表字段类型

    修改表中具体字段: 1)修改字段类型:alter table 表名 modify (column) 要修...

  • 字段操作

    1、修改字段名: alter table 表名 rename column A to B 2、修改字段类型: al...

  • 常用sql

    1、修改字段名: alter table 表名 rename column A to B 2、修改字段类型: al...

  • 2018-08-30:MySQL时间函数整理

    --创建字段默认当前时间(修改使用MODFY) ALTER TABLE `table_name` ADD `...

  • 转载一篇比较全面的

    Oracle 增加修改删除字段 添加字段的语法:alter table tablename add (column...

  • 操作记录

    修改字段的数据类型 ALTER TABLE table_name MODIFY column_name data_...

  • mysql操作笔记

    1.增加表字段 2.修改表字段名/编码方式/数据类型等 修改表字段类型ALTER TABLE 表名 MODIF...

网友评论

      本文标题:iview-form内table修改字段效验

      本文链接:https://www.haomeiwen.com/subject/ookerrtx.html