vue2中el-table点击操作添加按钮在表头添加整行数据为输入框，点击编辑当前行变成输入框，点击取消输入框变成文字

在Vue2中，为了实现这个功能，你可以使用Element UI的`el-table`组件结合表头自定义渲染以及`methods`来处理点击事件。首先，你需要设置一个数据数组用于存储表格的数据，并在模板上绑定这个数组。接下来，在表头部分，你可以创建一个计算属性或者方法来动态生成按钮和内容。这里是一个简化的示例：

<template>
  <el-table :data="tableData">
    <!-- 表头 -->
    <el-table-column type="index" label="序号"></el-table-column>
    <template #header>
      <el-row>
        <el-col>
          <el-button @click="addRow">新增</el-button>
        </el-col>
      </el-row>
    </template>

    <!-- 普通列 -->
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    
    <!-- 动态操作列 -->
    <template slot-scope="{ row }">
      <el-row>
        <el-col>
          <el-input v-if="editing[row.$index]" v-model="row临时字段名" placeholder="请输入..."></el-input>
          <button v-else @click="editRow(row)">编辑</button>
          <button @click="cancelEdit(row)">取消</button>
        </el-col>
      </el-row>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        // 更多数据...
      ],
      editing: {}, // 初始化一个对象跟踪正在编辑的行
    };
  },
  methods: {
    addRow() {
      this.tableData.push({ name: '', age: '' });
    },
    editRow(row) {
      this.editing[row.index] = true;
      // 如果需要，更新临时字段名为具体的行数据对应的字段
      this[row.临时字段名] = '';
    },
    cancelEdit(row) {
      delete this.editing[row.index];
      // 将输入框清空并恢复为原始文本
      this[row.临时字段名] = row.name;
    },
  },
};
</script>

在这个例子中，`editing`对象用于标记哪些行处于编辑状态，`临时字段名`是假设的一个变量名，实际应用中需要替换为你表格数据结构中的真实字段名。