vue+iview中使在table中用render渲染input

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

先看效果：

table效果

HTML部分：

<Table border :columns="columns0" :data="data0">
  <template #age="{row,index}">
    <Form class="tabform" :ref='"form1"+index' :model='row'>
      <FormItem prop="age" :rules='{required:true,message:"请输入年龄！"}'>
        <InputNumber style="width:100%" :max="10" :min="0" v-model="row.age"></InputNumber>
      </FormItem>
    </Form>
  </template>

  <template #sex="{row,index}">
    <Form id="tabform" :ref='"form2"+index' :model="row">
      <FormItem prop="sex" :rules='{required:true,message:"请输入性别！"}'>
        <Input style="width:100%" v-model='row.sex' placeholder=''/>
      </FormItem>
    </Form>
  </template>

  <template #address="{row,index}">
    <Form id="tabform" :ref='"form3"+index' :model="row">
      <FormItem prop="address" :rules="{required:true,message:'请输入地址！'}">
        <Input style="width:100%" v-model='row.address' placeholder=''/>
      </FormItem>
    </Form>
  </template>
</Table>

这里 # 是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;
}