要实现动态绑定Input数据,只需执行如下步骤
1.首先你得有个大大的表格this
<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里面要有这个表格的表头和数据spa
tableCol: [ {title: 'Body参数名称', key: 'key', slot: 'key'}, {title: 'Body参数值', key: 'value', slot: 'value'} ], tableData: []
3.重点来了,那就是在methods里面添加绑定的方式
a.先给它加条空数据code
addKey() { this.tableData.push({key:'', value: ''}) },
b.而后给input绑定on-change事件事件
setData(e, index, type){ this.tableData[index][type] = e.target.value }
c.表格加多了,要有一个删除按钮get
delData(index) { this.tableData.splice(index, 1) },
4.比往下看了,已经搞完了input