el-table添加、删除、编辑单行el-table-column row

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="添加">
        <template slot="header">
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
        </template>
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" placeholder="请输入姓名" @input="dowm"></el-input>
          <el-input v-model="scope.row.age" placeholder="请输入年龄"  @input="dowm"></el-input>
          <el-button type="primary" size="small" @click="handleSave(scope.$index, scope.row)">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "张三", age: 18 },
        { name: "李四", age: 20 },
        { name: "王五", age: 22 },
      ],
    };
  },
  methods: {
    handleAdd() {
      this.tableData.push({
        name: "",
        age: null,
      });
    },
    handleSave(index, row) {
      // 保存操作
      console.log("保存", row);
      // 删除空白行
      if (!row.name && !row.age) {
        this.tableData.splice(index, 1);
      }
    },
    handleEdit(index, row) {
      // 编辑操作
      console.log("编辑", row);
    },
    handleDelete(index, row) {
      // 删除操作
      console.log("删除", row);
      this.tableData.splice(index, 1);
    },
    down(){
     console.log('内容是什么',this.tableData)
    }
  },
};
</script>