vue实现将输入数据添加至表格中，通过点击Delete可删除所在行数据。

  <div>

    <form @submit.prevent="addData">

      <h1>添加新员工</h1>

      <label>

        Name:

        <input type="text" v-model="newData.name" required>

      </label>

      <label>

        Email:

        <input type="email" v-model="newData.email" required>

      </label>

      <label>

        Salary:

        <input type="number" v-model="newData.salary" required>

      </label><br>

      <button type="submit">Add</button>

    </form>

    <table>

      <thead>

        <tr>

          <th>Name</th>

          <th>Email</th>

          <th>Salary</th>

          <th>Action</th>

        </tr>

      </thead>

      <tbody>

        <tr v-for="(item, index) in dataList" :key="index">

          <td>{{ item.name }}</td>

          <td>{{ item.email }}</td>

          <td>{{ item.salary }}</td>

          <td><button @click="deleteData(index)">Delete</button></td>

        </tr>

      </tbody>

    </table>

  </div>

</template>

<script>

export default {

  data() {

    return {

      newData: {

        name: '',

        email: '',

        salary: 0,

      },

      dataList: [

        { name: '张三', email: 'zhangsan@example.com', salary: 5000 },

        { name: '李四', email: 'lisi@example.com', salary: 6000 },

        { name: '王五', email: 'wangwu@example.com', salary: 7000 },

      ],

    };

  },

  methods: {

    addData() {

      this.dataList.push(this.newData);

      this.newData = { name: '', email: '', salary: 0 };

    },

    deleteData(index) {

      this.dataList.splice(index, 1);

    },

  },

};

</script>

<style scoped>

table {

  border-collapse: collapse;

  margin: 20px;

}

th, td {

  border: 1px solid #ccc;

  padding: 5px 10px;

}

th {

  background-color: #eee;

}

</style>