关于javascript:iview表格动态绑定input数据

要实现动静绑定 Input 数据, 只需执行以下步骤
1. 首先你得有个大大的表格

<Table border :columns="tableCol" :data="tableData" :no-data-text="''"class="mb-15">
    <template slot-scope="{row, index}" slot="key">
      <Input v-model="row.key" @on-change="setData($event, index,'key')" class="inline-block w400"></Input>
    </template>
    <template slot-scope="{row, index}" slot="value">
      <Input v-model="row.value" @on-change="setData($event, index,'value')" class="inline-block w400"></Input>
          <span class="pointer" @click="delData(index)"> 删除 </span>
    </template>
</Table>
<Button @click="addKey"> 增加参数 </Button>

2. 而后在 data 外面要有这个表格的表头和数据

tableCol: [{title: 'Body 参数名称', key: 'key', slot: 'key'},
    {title: 'Body 参数值', key: 'value', slot: 'value'}
],
tableData: []

3. 重点来了, 那就是在 methods 外面增加绑定的形式
a. 先给它加条空数据

addKey() {this.tableData.push({key:'', value:''})
},

b. 而后给 input 绑定 on-change 事件

setData(e, index, type){this.tableData[index][type] = e.target.value
}

c. 表格加多了, 要有一个删除按钮

delData(index) {this.tableData.splice(index, 1)
},

4. 比往下看了, 曾经搞完了