基于前端VUE+ElementUI實現(xiàn)table行上移或下移功能(支持跨頁移動)

更新時間：2024年07月12日 09:35:08 作者：斗帝藍電霸王龍

有時候需要前端實現(xiàn)上移和下移功能,下面這篇文章主要給大家介紹了關于如何基于前端VUE+ElementUI實現(xiàn)table行上移或下移(支持跨頁移動)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

最近在做后臺管理遇見了一個這樣的需求：table列表需要支持上下移動數(shù)據(jù)，并且也需要滿足跨頁移動，前端把數(shù)據(jù)移動整理之后，提交給后端進行保存（平常這種數(shù)據(jù)移動都是調(diào)用后端的接口，然后在查詢數(shù)據(jù)就可以完成了，但是這次顯然不能這么做，因為后端只有一個保存數(shù)據(jù)的接口，所以這就需要前端自己處理數(shù)據(jù)了，廢話少說，上效果圖和源碼！

靜態(tài)效果圖

動態(tài)效果圖

實現(xiàn)源碼（HTML）

  <el-table :data="paginatedData">
    <el-table-column label="操作" prop="operate">
      <template slot-scope="scope">
        <el-button-group>
          <el-button
            title="下移"
            :disabled="isDown(scope.row)"
            @click="moveupOrmovedown(scope.row, scope.$index, 'down')"
          >
          </el-button>
          <el-button
            title="上移"
            :disabled="scope.$index === 0 && currentPage === 1"
            @click="moveupOrmovedown(scope.row, scope.$index, 'up')"
          >
          </el-button>
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>
  <!-- 頁碼參考（此處不涉及該功能的任何邏輯，可忽略 -->
  <el-pagination
     background
     :page-size="pageSize"
     :current-page="currentPage"
     layout="total, prev, pager, next, jumper"
     :total="totalSize"
     @current-change="(val) => (currentPage = val)"
   >
 </el-pagination>

實現(xiàn)源碼（JS）

   moveupOrmovedown(row, index, type) {
     let arr = this.filteredData
     const findIndex = this.filteredData.findIndex(
       (item) => item.date === row.date
     )
     index = findIndex > this.pageSize - 1 ? findIndex : index
     type === 'up'
       ? arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]))
       : arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]))
   }

詳情源碼(僅展示參數(shù))

<script>
export default {
  data() {
    return {
      totalSize: 0,
      currentPage: 1,
      pageSize: 10,
      filteredData: [],
      paginatedData: [],
      tableData: []
    }
  },
  methods: {
    isDown(row) {
      const findIndex = this.filteredData.findIndex(
        (item) => item.date === row.date
      )
      return findIndex === this.filteredData.length - 1 
    },
    moveupOrmovedown(row, index, type) {
      let arr = this.filteredData
      const findIndex = this.filteredData.findIndex(
        (item) => item.date === row.date
      )
      index = findIndex > this.pageSize - 1 ? findIndex : index
      type === 'up'
        ? arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]))
        : arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]))
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    selectCheckBox(selectCheckBox) {
      const newFilterData = this.filterDataByDate(
        this.tableData,
        selectCheckBox
      )
      this.filteredData = [...this.filteredData, ...newFilterData]
    },
    paginateData(data, pageSize, currentPage) {
      if (data.length < 11) return data
      const startIndex = (currentPage - 1) * pageSize
      const endIndex = startIndex + pageSize
      const dataToShow = data.slice(startIndex, endIndex)
      return dataToShow
    },
    updatePaginatedData() {
      this.totalSize = this.filteredData.length
      // 分頁(前端處理)
     // this.paginatedData = this.$util.paginateData(
      this.paginatedData = this.paginateData(
        this.filteredData,
        this.pageSize,
        this.currentPage
      )
    }
  },
  created() {
    // 調(diào)后端接口返回的全部數(shù)據(jù)(后面前端自己分頁)
    this.tableData = tableData
  },
  mounted() {},
  watch: {
    currentPage: {
      handler(newPage) {
        this.updatePaginatedData()
      },
      immediate: true,
    },
    filteredData: {
      handler(newArray) {
        this.updatePaginatedData()
      },
      immediate: true,
    }
  },
  computed: {},
  filters: {}
}
</script>