【前端】vue采用el-table 添加行手动填写数据和删除行及提交

<template>
  <div>
    <el-button @click="addRow">添加行</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.date" type="date" placeholder="选择日期">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" placeholder="请输入姓名"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template slot-scope="scope">
          <el-input v-model="scope.row.address" placeholder="请输入地址"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="deleteRow(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="submit">提交</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 初始数据可以是空数组，也可以有默认的一些数据对象
      ]
    };
  },
  methods: {
    addRow() {
      // 添加一行默认数据
      this.tableData.push({ date: '', name: '', address: '' });
    },
    deleteRow(index) {
      // 删除指定索引的行
      this.tableData.splice(index, 1);
    },
    submit() {
      // 提交表格数据
      console.log('提交的数据:', this.tableData);
      // 这里可以执行提交操作，例如发送请求到后端等
    }
  }
};
</script>

这段代码提供了一个基本的实现，用户可以手动添加行，填写数据，删除任意行，并可以提交表格数据。在提交时，会在控制台打印出提交的数据。这个例子简单易懂，并且可以作为Vue和Element UI结合使用的入门示例。