Element UI 表格中添加输入框 - 行内编辑

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-input v-model="scope.row.value"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          {
            name: '张三',
            age: 25,
            value: ''
          },
          {
            name: '李四',
            age: 30,
            value: ''
          },
          {
            name: '王五',
            age: 35,
            value: ''
          }
        ]
      };
    }
  };
</script>
<p>在上面的示例代码中，我们在 el-table-column 组件中使用了 slot-scope 属性来获取当前行的数据，然后使用 el-input 组件来展示输入框，并使用 v-model 绑定了当前行的 value 值，从而实现在表格中的行里写入输入框的效果。</p>