el-table表格中实时修改某一行的字段

在Vue.js中使用Element UI库的el-table组件时，可以通过使用row和index参数在el-table-column中绑定事件来实现实时修改某一行的字段。以下是一个简单的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="操作" width="180">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row.name"
          @change="handleNameChange(scope.$index, scope.row)"
          size="small"
        ></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '张三' },
        { date: '2016-05-04', name: '李四' }
      ]
    }
  },
  methods: {
    handleNameChange(index, row) {
      // 这里可以实现实时修改字段的逻辑，例如发送请求更新服务器数据等
      console.log(`Row ${index} name changed to: ${row.name}`);
    }
  }
}
</script>

在这个例子中，我们为每一行的姓名字段添加了一个el-input组件，并通过v-model实现了数据双向绑定。当输入框的内容发生变化时，会触发@change事件，并调用handleNameChange方法。在这个方法中，你可以添加你需要的逻辑，比如更新数据库或者其他操作。