vue2 可编辑表格

以下是一个Vue2可编辑表格的示例代码：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" v-show="scope.row.show"></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄">
        <template slot-scope="scope">
          <el-input v-model="scope.row.age" v-show="scope.row.show"></el-input>
          <span v-else>{{ scope.row.age }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="editRow(scope.row)">编辑</el-button>
          <el-button @click="saveRow(scope.row)" v-show="scope.row.show">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20, show: false },
        { id: 2, name: '李四', age: 25, show: false },
        { id: 3, name: '王五', age: 30, show: false }
      ]
    };
  },
  methods: {
    editRow(row) {
      row.show = true;
    },
    saveRow(row) {
      row.show = false;
    }
  }
};
</script>

在上述代码中，我们使用了Element UI的`el-table`和`el-input`组件来实现可编辑表格的功能。通过`v-show`指令来控制编辑状态下的输入框的显示与隐藏。当点击编辑按钮时，会将对应行的`show`属性设置为`true`，从而显示输入框；当点击保存按钮时，会将对应行的`show`属性设置为`false`，从而隐藏输入框并保存修改的数据。