iview table中生成多个Input双向绑定数据

//iview table 的columns的部分代码

title: '面积(公顷)',
key: "protectArea",
render: (h, params) => {
  return h("Input", {
    props: {
      type: 'text',
      value: params.row.protectArea
    },
    on: {
      input: (event) => {
        if(params.index==0){
          this.patientData.woodlandProtectionOneArea=event
        }
        else if(params.index==1){
          this.patientData.woodlandProtectionTwoArea=event
        }
        else if(params.index==2){
          this.patientData.woodlandProtectionThreeArea=event
        }
        else{
          this.patientData.woodlandProtectionFourArea=event
        }
      }
    }
  })
}

//iview table 的date

forestTypeData: [
  {
    protectGrade: "Ⅰ",
    countryGrade: "一",
    naturalGrade: '国家级',
    protectArea: "",
    countryArea: "",
    naturalArea: ""
  },]

这里面是通过遍历出多个Input,分别给每个字段赋值，通过判断params.index来查询对应的Input

如果要编辑的话，首先要将input的内容给自动赋值进去，然后根据columns中对Input的value赋的值（这里是protectArea ）来进行赋值编辑，进行编辑和新增一样的操作，下面代码是将从后台获取的值赋值到对应的input中

this.forestTypeData[0].protectArea = this.patientData.woodlandProtectionOneArea
this.forestTypeData[1].protectArea = this.patientData.woodlandProtectionTwoArea
this.forestTypeData[2].protectArea = this.patientData.woodlandProtectionThreeArea具体可以通过npm下载  https://www.npmjs.com/package/vue-multi-input