vue-动态添加/删除输入框

父组件helloWord.vue中

<template>
  <div class="content-body">
    <div>动态添加/删除</div>
    <div>
      <table border="1" cellpadding="0" cellspacing="0">
        <thead>
        <th v-for="(item,index) in dataArr" :key="item.guid" style="margin:10px 0">
          <button @click="deleteS(index)">删除</button>
          <n-input></n-input>
        </th>
        </thead>
        <tbody>
          <tr >
            <td v-for="(item) in dataArr" :key="item.guid" style="margin:10px 0">
              <v-input></v-input>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div>
      <button @click="addNew">添加</button>
    </div>
  </div>
</template>

<script>
  import Utils from '../utils/utils.js'
  import nInput from './nInput'
  import vInput from './vInput'
  export default {
    components:{
      nInput,
      vInput
    },
    data() {
      return {
        dataArr:[],
      }
    },
    methods: {
      // 添加
      addNew(){
        // 将生成的guid push至dataArr，guid是为了保证每个的唯一性，千万别用index作为key
        this.dataArr.push({guid:Utils.guid()});
        console.log(this.dataArr);
      },
      // 删除
      deleteS(index){
        // 删除指定下标
        this.dataArr.splice(index,1);
      }
    },
  }
</script>
<style scoped>

</style>

子组件nInput .vue

<template>
  <div>
    <span>标题</span>
    <input type="text" :value="inputN">
  </div>
</template>

<script>
  export default {
    name: "nInput",
    data() {
      return {
        inputN: '',
      }
    },
    methods: {
    }
  }
</script>

子组件vInput .vue

<template>
  <div>
    <span>内容</span>
    <input type="text" :value="inputV">
  </div>
</template>

<script>
  export default {
    name: "vInput",
    data() {
      return {
        inputV: '',
      }
    },
    methods: {
    }
  }
</script>

utils.js

const utils = {
  guid: function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random() * 16 | 0,
        v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }
}
export default utils

效果图

实例地址

原文地址