element-ui table行点击获取行索引（index）并利用索引更换行顺序

让我为你详细讲解“element-ui table行点击获取行索引（index）并利用索引更换行顺序”的完整攻略。

1. 准备工作

首先，你需要先安装npm包管理器以及Element UI组件库。如果你还未安装的话，可以通过以下命令进行安装：

npm install npm -g
npm install element-ui --save

在完成安装后，你需要在你的客户端代码中引入Element UI组件：

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

Vue.use(ElementUI)

接下来，你需要在Vue组件中引入Table组件，并在该组件中设置需要显示的表格数据。下面是一个简单的示例:

<template>
  <el-table :data="tableData" @row-click="handleRowClick">
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="gender" label="性别"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '小明',
          age: 18,
          gender: '男'
        },
        {
          name: '小红',
          age: 20,
          gender: '女'
        },
        {
          name: '小王',
          age: 22,
          gender: '男'
        }
      ]
    };
  },
  methods: {
    handleRowClick(row, column, event) {
      console.log(row, column, event);
    }
  }
};
</script>

在上面的代码中，我们通过Table组件的:data属性设置了需要显示的表格数据。同时，在组件的@row-click事件中，我们绑定了一个叫做handleRowClick的方法用于处理行点击事件。

2. 获取行索引并更换行顺序

接下来，我们需要在点击行时获取该行在表格中的索引，并通过该索引来更换行的顺序。

为了获取行索引，我们需要在handleRowClick方法中声明一个index变量，并通过tableData数组的indexOf方法获取该行在数组中的索引。代码如下：

  methods: {
    handleRowClick(row, column, event) {
      let index = this.tableData.indexOf(row);
      console.log('行索引：', index);
    }
  }

有了行索引之后，我们就可以通过该索引来更换行的顺序。例如，如果需要将点击的行移到表格的最后一行，我们可以先通过splice方法将该行从数组中删除。然后，通过push方法将该行添加到数组的末尾。最后，我们需要通过this.tableData = xxx的方式来重新渲染表格。下面是完整的示例代码：

  methods: {
    handleRowClick(row, column, event) {
      let index = this.tableData.indexOf(row);
      this.tableData.splice(index, 1);
      this.tableData.push(row);
      this.tableData = [...this.tableData];
    }
  }

这样，我们就成功地实现了获取行索引并更换行顺序的功能，通过以上示例，你应该可以明白如何在element-ui table组件中通过行点击事件获取行索引并修改表格数据。