Vue中 对Table表格中的输入项进行校验

项目开发中，经常会遇到的场景：对table表格的输入项字段进行校验，同时提交时整体校验。

这个坑真的爬了好久，几个需求做完了，校验也没实现，挫败！后来看到一个博主Element UI from实现校验的思路，觉得View UI也可以尝试下, 分享下实现过程。

写了个简单的demo演示, 效果如图所示，Table:

！！这个校验的实现，主要思路是：
1. From表单中嵌套使用table表格，用表单的校验机制实现校验；

2.  ivu-form-item 元素，绑定动态prop;

html代码如下，本次项目里样式用了 View UI ，element其他，也可以尝试这个校验思路：

<template>
  <div class="wrapper">
    <h3>Vue中  对Table表格中的输入项添加校验</h3>
    <Form :model="fromData" ref="tableFrom" >
      <Table  ref="myTable"  :columns="columns"  :data="fromData.list"  >
        <template slot='ip' slot-scope="{ row, index }">
            <FormItem :prop="'list.'+index+'.ip'" :rules="fromaRules.ip">
              <Input v-model="fromData.list[index].ip"  placeholder="ip地址" style="width:250px;" />
            </FormItem>
        </template>
        <template slot='port' slot-scope="{ row, index }">
            <FormItem :prop="'list.'+index+'.port'" :rules="fromaRules.port">
              <Input v-model="fromData.list[index].port"  placeholder="端口" style="width:250px;"/>
            </FormItem>
        </template>
      </Table>
    </Form>
    <!-- 提交按钮 -->
    <Button type="primary"   @click="submit">提交</Button>
     
  </div>
</template>

js代码如下：

<script>
export default {
  name:'',
  components:{},
  props:{},
  data(){
    return {
      fromData:{
        list:[]
      },
      list:[
        {name:'test',ip:'',port:''},
        {name:'test1',ip:'',port:''},
        {name:'test2',ip:'',port:''}
      ],
      columns:[
         {
            title: '名称',
            key: 'name',
            width:200
          },
         {
            title: 'ip地址',
            key: 'ip',
            slot: 'ip',
          },
          {
            title: '端口',
            key: 'port',
            slot: 'port',
          }
      ],
      fromaRules:{
        port:[
          { required: true, transform: value => value ? value.trim() : '', message: '端口不能为空', trigger: 'blur' }
        ],
        ip: [
          { required: true, transform: value => value ? value.trim() : '', type: 'string', message: 'IP地址不能为空', trigger: 'blur' },
        ]
      }
    }
  },
  mounted(){
     this.$set(this.fromData,'list',this.list)
  },
  methods:{
    submit(){
        this.$refs['tableFrom'].validate((valid) => {
          if (valid) {
             //执行保存方法
             console.log(this.fromData.list)
          }
        })
    }
  }
}
</script>

！！！代码中比较关键的部分：

1. :prop="'list.'+index+'.ip'" ,用于动态绑定prop到ivu-form-item 元素 ；

2.:rules="fromaRules.ip"，添加校验规则；

3. this.$set(this.fromData,'list',this.list)，用于为fromData设置list这个节点。

如果有更好的实现思路，欢迎一起探讨学习！