elementUI Table 表格编辑数据后停留当前位置

在Element UI的Table组件中，如果你想要在编辑数据之后让表格停留在当前位置，你可以通过Table组件的highlight-current-row属性来实现。此外，你还需要使用@current-change事件来保持当前行的状态。

以下是一个简单的例子，展示了如何实现这个功能：

<template>
  <el-table
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    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="操作">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎' }, { date: '2016-05-04', name: '李小虎' }],
      currentRow: null
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleEdit(index, row) {
      // 编辑数据的逻辑
      // ...
      // 编辑完成后，让表格停留在当前位置
      this.tableData.splice(index, 1, row); // 更新表格数据
    }
  }
}
</script>

在这个例子中，我们使用了highlight-current-row属性来高亮显示当前行，并且使用@current-change事件来监听当前行的变化。在编辑操作中，我们在编辑完成后通过this.tableData.splice(index, 1, row)来更新表格数据，这样表格就会停留在更新后的当前行。