"```markdown

Element UI 表格编辑实现

在使用Element UI的表格组件时，常常需要实现表格数据的编辑功能。本文将介绍如何实现点击编辑后跳转到编辑页面，编辑完成后返回到原列表页面，并保持原分页状态。

一、项目结构

假设项目结构如下：

src/
├── components/
│   ├── EditPage.vue
│   └── TablePage.vue
├── App.vue
└── main.js

二、安装 Element UI

在项目中安装Element UI：

npm install element-ui --save

在main.js中引入Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

三、表格页面实现

在TablePage.vue中实现表格展示和编辑功能：

<template>
  <div>
    <el-table :data=\"tableData\" style=\"width: 100%\">
      <el-table-column prop=\"id\" label=\"ID\" width=\"180\"></el-table-column>
      <el-table-column prop=\"name\" label=\"Name\" width=\"180\"></el-table-column>
      <el-table-column label=\"Actions\">
        <template slot-scope=\"scope\">
          <el-button @click=\"editRow(scope.row)\">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change=\"handleCurrentChange\"
      :current-page=\"currentPage\"
      :page-size=\"pageSize\"
      :total=\"total\">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  methods: {
    fetchData() {
      // 模拟获取数据
      const data = [];
      for (let i = 1; i <= 100; i++) {
        data.push({ id: i, name: `Item ${i}` });
      }
      this.total = data.length;
      this.tableData = data.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    },
    editRow(row) {
      this.$router.push({ name: 'EditPage', query: { id: row.id } });
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchData();
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

四、编辑页面实现

在EditPage.vue中实现编辑功能：

<template>
  <div>
    <el-form :model=\"form\">
      <el-form-item label=\"Name\">
        <el-input v-model=\"form.name\"></el-input>
      </el-form-item>
      <el-button type=\"primary\" @click=\"save\">保存</el-button>
      <el-button @click=\"cancel\">取消</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: null,
        name: ''
      }
    };
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.form.id = id;
      // 模拟获取数据
      this.form.name = `Item ${id}`;  // 在实际应用中应从API获取
    }
  },
  methods: {
    save() {
      // 模拟保存数据
      console.log('保存:', this.form);
      this.$router.push({ name: 'TablePage', query: { page: this.$route.query.page } });
    },
    cancel() {
      this.$router.push({ name: 'TablePage' });
    }
  }
};
</script>

五、路由配置

在router/index.js中设置路由：

import Vue from 'vue';
import Router from 'vue-router';
import TablePage from '@/components/TablePage.vue';
import EditPage from '@/components/EditPage.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'TablePage',
      component: TablePage
    },
    {
      path: '/edit',
      name: 'EditPage',
      component: EditPage
    }
  ]
});

六、总结

通过以上步骤，可以实现Element UI表格的编辑功能，点击编辑后跳转到编辑页面，编辑完成后返回到列表页面，并保持原分页状态。此实现可以根据项目需求进行扩展和调整。

Element UI的表格，点击编辑跳转到编辑页面，编辑完成返回到列表页面，还返回到原分页列表