vue+element，点击新增在表格的最后一行加一行数据直接进行添加

点击新增怎么在表格的最下面新加一行直接进行添加数据，然后保存。

img

向table绑定的json，push一条数据

提供一个思路 给列表数据项添加一个float变量用来控制当前行的数据项是否可编辑，如果可编辑当前项就变为输入框可编辑，然后新增的时候往table绑定的数组中添加一条数据

<el-table :data="tableData">
  <el-table-column>
    <template slot="header">
      <el-button type="primary" icon="el-icon-plus" @click="addRow">新增</el-button>
    </template>
  </el-table-column>
  <el-table-column label="姓名" prop="name">
    <template slot-scope="scope">
      <el-input v-model="scope.row.name" v-if="scope.$index === tableData.length - 1"></el-input>
      <span v-else>{{ scope.row.name }}</span>
    </template>
  </el-table-column>
  <el-table-column label="年龄" prop="age">
    <template slot-scope="scope">
      <el-input v-model="scope.row.age" v-if="scope.$index === tableData.length - 1"></el-input>
      <span v-else>{{ scope.row.age }}</span>
    </template>
  </el-table-column>
</el-table>

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 22 },
        { name: '王五', age: 30 }
      ]
    }
  },
  methods: {
    addRow() {
      this.tableData.push({ name: '', age: '' });
    }
  }
}