Element table 上下移需求的实现

接下来我将为您提供实现Element UI表格上下移需求的攻略。这个需求的主要目标是：在Element UI表格中，为用户提供左侧上下移动按钮，使其在表格中对表格行进行上下移动排序。

1. 准备工作

首先，我们需要安装 element-ui 和 lodash，如果您的项目中已经安装了这两个依赖包，可以省略此步骤。

npm install element-ui --save-dev
npm install lodash --save-dev

接下来，在Vue项目中引入 element-ui 和 lodash 两个依赖包：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import _ from 'lodash';

Vue.use(ElementUI);

2. 添加上下移动按钮

打开 Element table 组件所在的 Vue 文件，可以看到 Element UI 表格默认已经为每一行生成了一个默认的 index 列，我们可以在这一列中添加上下移动按钮。在表格的模板中添加以下代码：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column type="index" :resizable="false">
        <template slot-scope="{ row }">
          <el-button
            :disabled="!canMoveUp(row)"
            size="small"
            icon="el-icon-arrow-up"
            circle
            @click.prevent="handleMoveUp(row)"
          />
          <el-button
            :disabled="!canMoveDown(row)"
            size="small"
            icon="el-icon-arrow-down"
            circle
            @click.prevent="handleMoveDown(row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="age" label="Age" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

这里使用 el-table-column 的 type="index" 属性创建了一列默认的 index 列，并通过 slot-scope 获取了当前行的数据。我们使用 el-button 添加了向上和向下行移动按钮，并使用 @click.prevent 监听按钮点击事件触发 handleMoveUp 或 handleMoveDown 方法。

3. 编写上下移动方法

接下来，我们需要在 Vue 组件中定义 handleMoveUp 和 handleMoveDown 方法，来实现行的上下移动操作。

methods: {
  handleMoveUp(row) {
    const index = this.tableData.indexOf(row);
    [this.tableData[index], this.tableData[index - 1]] = [this.tableData[index - 1], this.tableData[index]];
  },
  handleMoveDown(row) {
    const index = this.tableData.indexOf(row);
    [this.tableData[index], this.tableData[index + 1]] = [this.tableData[index + 1], this.tableData[index]];
  },
  canMoveUp(row) {
    return this.tableData.indexOf(row) !== 0;
  },
  canMoveDown(row) {
    const index = this.tableData.indexOf(row);
    return index !== this.tableData.length - 1;
  },
},

在 handleMoveUp 和 handleMoveDown 方法中，我们使用 indexOf 获取当前行在表格数据中的索引值，然后使用相应的位置交换算法，实现行的上下移动。

在 canMoveUp 和 canMoveDown 方法中，我们检查当前行在表格数据中的位置，判断当前行是否可以向上或向下移动。

4. 展示结果

最后，我们在 Vue 组件的数据中添加一份表格数据，用于演示上下移动功能。

data() {
  return {
    tableData: [
      { name: 'John Doe', age: 35, address: '10 Downing Street' },
      { name: 'Jane Doe', age: 26, address: '123 Main Street' },
      { name: 'Jim Doe', age: 42, address: '456 Maple Street' },
      { name: 'Bill Doe', age: 18, address: '789 Broadway' },
    ],
  };
}

现在，刷新页面，您应该可以看到一个带有上下移动按钮的Element UI表格。点击这些按钮，会在表格中实现行的上下移动。

示例：

以一个简单的表格为例，表格中包含了姓名、年龄和住址这三项信息。现在，我们需要向表格添加一个可以进行行的上下移动排序的功能。使用以上的方法，您可以轻松地实现这个需求。

另一个示例：在一个元素列表页中，我们需要为每个元素提供向上和向下移动的功能，以便用户可以更换元素的位置顺序。在这种情况下，可以使用以上方法，在列表中实现行的上下移动。