IView table dynamically binding input data

Time:2021-4-27

IView table dynamically binding input data
To dynamically bind input data, just perform the following steps
First of all, you have to have a big form

<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)" > delete</span>
    </template>
</Table>
< button @ Click = "addkey" > Add parameter < / button >

2. Then there should be the table header and data in the data

tableCol: [
    {Title: 'body parameter name', key: 'key', slot: 'key'},
    {Title: 'body parameter value', key: 'value', slot: 'value'}
],
tableData: []

3. The key point is how to add binding in methods
a. Add an empty data to it first

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

b. Then bind the on change event to the input

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

c. If the table is too many, there should be a delete button

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

4. By looking down, it’s finished

Recommended Today

Java Engineer Interview Questions

The content covers: Java, mybatis, zookeeper, Dubbo, elasticsearch, memcached, redis, mysql, spring, spring boot, springcloud, rabbitmq, Kafka, Linux, etcMybatis interview questions1. What is mybatis?1. Mybatis is a semi ORM (object relational mapping) framework. It encapsulates JDBC internally. During development, you only need to pay attention to the SQL statement itself, and you don’t need to […]