vue+iview中使在table中用render渲染input表单及验证(表单支持同时多行编辑)

关于表单单行的编辑操作iview文档中已经提供有范例，以下是复杂点支持多行编辑的用法。

先看效果：

table效果

HTML部分：

这里 # 是v-slot的缩写，#age="{row,index}"相当于v-slot:age="{row,index}"。
关于v-slot的相关知识点，请参考官方文档：作用域插槽
这里有个重点，rule验证规则比需要写在FormItem标签中，写在Form标签中是无效的！

VUE部分：

data0=[
    {
      name:'张三',
      age:null,
      sex:'',
      address:'',
    },
    {
      name:‘李四’,
      age:null,
      sex:'',
      address:'',
    },
    {
      name:'王五',
      age:null,
      sex:'',
      address:'',
    },
    {
      name:'赵六',
      age:null,
      sex:'',
      address:'',
    },
  ]
columns0=[
    {
      title: '姓名',
      align:'cente',
      key:'name',
      render:(h,params)=>{
        this.data0[params.index]=params.row
        //通过这种方式可将input中输入的值与data0中的数据进行双向绑定
        //官方文档中有关作用域插槽的取值方式我在此无法使用，只通能通过这种方式进行双向绑定，有解决办法的小伙伴可以留言告诉我！
      }
    },
    {
      title: '年龄',
      slot:'age',
    },
    {
      title: '性别',
      slot: 'sex'
    },
    {
      title:'地址',
      slot:'address'
    }
  ]

上面范例中我没有写验证结果的处理部分，处理效验结果跟普通form的用法一样：

//注意一下ref对应的标识要通过'form1'+index来获取到
(this.$refs['form1'+params.index] as any).validate(async (valid:boolean)=>{
    if(valid){
      //......
    }else{
      //......
    }
})

只要将上面这一部分在类似‘on-change’ ‘on-blur’的触发事件中进行效验处理即可

CSS部分(覆盖iview源码中form表单样式)：

.tabform{
  margin-bottom: -20px!important;
}
.tabform .ivu-form-item-error-tip{
  top: 5px;
  left: 75px;
}