前端基于VUE+ElementUI实现table行上移或下移(支持跨页移动)

<template>
  <el-table
    :data="tableData"
    border
    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="120">
      <template slot-scope="scope">
        <el-button @click="moveUp(scope.$index)">上移</el-button>
        <el-button @click="moveDown(scope.$index)">下移</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ]
    }
  },
  methods: {
    moveUp(index) {
      if (index > 0) {
        const upItem = this.tableData.splice(index, 1)[0];
        this.tableData.splice(index - 1, 0, upItem);
      }
    },
    moveDown(index) {
      if (index < this.tableData.length - 1) {
        const downItem = this.tableData.splice(index, 1)[0];
        this.tableData.splice(index + 1, 0, downItem);
      }
    }
  }
}
</script>

这个简单的示例展示了如何在Vue和Element UI中实现表格行的上移和下移功能。moveUp 和 moveDown 方法通过调用数组的 splice 方法来移动数组中的元素，实现移动行。在实际应用中，你可能需要考虑跨页的情况，这时可以在移动后更新当前页面的显示，并确保表格分页的数据源也相应地更新。