关于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.比往下看了,曾经搞完了