elementui中的tabel中使用input框实现表格数据编辑

elementui中tabel组件点击编辑按钮后，如何使数据变成input框的形式？

elementuiui中的tabel有个自定义列模板，在template中写span标签和input标签，span标签用于展示数据，而input标签用于编辑数据，通过v-if来控制显示；

<el-table-column prop="age" label="年龄">
  <template slot-scope="scope">
    <span v-if="!isEditor">{{ scope.row.age }}</span>
    <el-input v-model="scope.row.age" v-else size="small"></el-input>
  </template>
</el-table-column>

注：input要使用v-model绑定span中显示的数据，这样就可以实现编辑了

编辑后要实现表格数据更新：

input中使用了v-model，而v-model是双向数据绑定，当input输入后，会把v-model绑定的值改变，所以tabel组件绑定的数据（下面的tableData1）也会相应的发生改变；只需要把tableData1的数据再传给后台，然后再重新调一次接口即可完成表格数据更新；

<el-table
  :data="tableData1"
  ref="multipleTable"
>
  <el-table-column prop="id" label="序号" width="180">
  </el-table-column>
  <el-table-column prop="uname" label="姓名" width="180">
    <template slot-scope="scope">
      <span v-if="!isEditor">{{ scope.row.uname }}</span>
      <el-input v-model="scope.row.uname" v-else></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="pwd" label="密码" width="180">
    <template slot-scope="scope">
      <span v-if="!isEditor">{{ scope.row.pwd }}</span>
      <el-input v-model="scope.row.pwd" v-else size="small"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄">
    <template slot-scope="scope">
      <span v-if="!isEditor">{{ scope.row.age }}</span>
      <el-input v-model="scope.row.age" v-else size="small"></el-input>
    </template>
  </el-table-column>
</el-table>

效果如下：