前端 关于表格的输入功能 还有校验功能 以及添加表格行功能

img


如图 这样子的表格怎么做呀 这个表格的输入功能 怎么做 还有校验的功能 然后下面的话有一个添加表格行功能 点击一下添加一行 要怎么做

表格里面放input框输入内容，用失焦失焦做校验。
添加收款人功能：原生的话用克隆。vue的话用循环
写了个vue demo（原生的话就是获取节点，然后克隆）

<template>
  <table border="1" cellspacing="0" style="width:500px">
      <tbody >
        <tr>
          <td>序号</td>
          <td>姓名</td>
          <td>电话</td>
        </tr>
        <tr v-for="(val,i) in element" :key="val">
          <td>{{++i}}</td>
          <td><input type="text" @blur="verificationName"></td>
          <td><input type="text" @blur="verificationPhone"></td>
        </tr>
      </tbody>
    </table>
    <button @click="addElement">添加</button>
</template>
<script>
data() {
    return {
      element:['1'],
  }
},
methods:{
verificationName(){
      console.log('名字校验操作');
    },
    verificationPhone(){
      console.log('电话校验操作');
    },
    addElement(){
      this.element.push('1')
    },
}
</script>

img