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.比往下看了,已經搞完了