elementUI的table组件实现动态增删可输入的表格

在使用Element UI的Table组件时，可以通过v-for指令动态渲染行，并使用事件监听来实现行的添加和删除。以下是一个简单的实现示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
    <el-table-column label="操作" width="150">
      <template slot-scope="scope">
        <el-button @click="handleDelete(scope.$index)">删除</el-button>
        <el-button @click="handleAdd">添加</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // ...可以添加更多行
      ]
    }
  },
  methods: {
    handleDelete(index) {
      this.tableData.splice(index, 1);
    },
    handleAdd() {
      this.tableData.push({
        date: '',
        name: '',
        address: ''
      });
    }
  }
}
</script>

在这个例子中，tableData是一个数组，包含了表格中显示的数据。handleDelete方法通过索引删除数组中的元素，实现行的删除。handleAdd方法通过push方法添加一个新的空对象到数组中，实现行的添加。用户可以通过点击“删除”按钮来删除当前行，点击“添加”按钮来添加一个新的空行。