ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端基于VUE+ElementUI实现table行上移或下移(支持跨页移动) [打印本页]
作者: 用户国营    时间: 2024-6-20 16:13
标题: 前端基于VUE+ElementUI实现table行上移或下移(支持跨页移动)
最近在做背景管理遇见了一个这样的需求：table列表需要支持上下移动数据，并且也需要满意跨页移动，前端把数据移动整理之后，提交给后端进行保存（寻常这种数据移动都是调用后端的接口，然后在查询数据就可以完成了，但是这次显然不能这么做，因为后端只有一个保存数据的接口，所以这就需要前端自己处置惩罚数据了，废话少说，上结果图和源码！
  


  1.   <el-table :data="paginatedData">
  2.     <el-table-column label="操作" prop="operate">
  3.       <template slot-scope="scope">
  4.         <el-button-group>
  5.           <el-button
  6.             title="下移"
  7.             :disabled="isDown(scope.row)"
  8.             @click="moveupOrmovedown(scope.row, scope.$index, 'down')"
  9.           >
  10.           </el-button>
  11.           <el-button
  12.             title="上移"
  13.             :disabled="scope.$index === 0 && currentPage === 1"
  14.             @click="moveupOrmovedown(scope.row, scope.$index, 'up')"
  15.           >
  16.           </el-button>
  17.         </el-button-group>
  18.       </template>
  19.     </el-table-column>
  20.   </el-table>
  21.   <!-- 页码参考（此处不涉及该功能的任何逻辑，可忽略 -->
  22.   <el-pagination
  23.      background
  24.      :page-size="pageSize"
  25.      :current-page="currentPage"
  26.      layout="total, prev, pager, next, jumper"
  27.      :total="totalSize"
  28.      @current-change="(val) => (currentPage = val)"
  29.    >
  30. </el-pagination>
复制代码

  1.    moveupOrmovedown(row, index, type) {
  2.      let arr = this.filteredData
  3.      const findIndex = this.filteredData.findIndex(
  4.        (item) => item.date === row.date
  5.      )
  6.      index = findIndex > this.pageSize - 1 ? findIndex : index
  7.      type === 'up'
  8.        ? arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]))
  9.        : arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]))
  10.    }
复制代码

  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       totalSize: 0,
  6.       currentPage: 1,
  7.       pageSize: 10,
  8.       filteredData: [],
  9.       paginatedData: [],
  10.       tableData: []
  11.     }
  12.   },
  13.   methods: {
  14.     isDown(row) {
  15.       const findIndex = this.filteredData.findIndex(
  16.         (item) => item.date === row.date
  17.       )
  18.       return findIndex === this.filteredData.length - 1
  19.     },
  20.     moveupOrmovedown(row, index, type) {
  21.       let arr = this.filteredData
  22.       const findIndex = this.filteredData.findIndex(
  23.         (item) => item.date === row.date
  24.       )
  25.       index = findIndex > this.pageSize - 1 ? findIndex : index
  26.       type === 'up'
  27.         ? arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]))
  28.         : arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]))
  29.     },
  30.     handleCurrentChange(val) {
  31.       this.currentPage = val
  32.     },
  33.     selectCheckBox(selectCheckBox) {
  34.       const newFilterData = this.filterDataByDate(
  35.         this.tableData,
  36.         selectCheckBox
  37.       )
  38.       this.filteredData = [...this.filteredData, ...newFilterData]
  39.     },
  40.     paginateData(data, pageSize, currentPage) {
  41.       if (data.length < 11) return data
  42.       const startIndex = (currentPage - 1) * pageSize
  43.       const endIndex = startIndex + pageSize
  44.       const dataToShow = data.slice(startIndex, endIndex)
  45.       return dataToShow
  46.     },
  47.     updatePaginatedData() {
  48.       this.totalSize = this.filteredData.length
  49.       // 分页(前端处理)
  50.      // this.paginatedData = this.$util.paginateData(
  51.       this.paginatedData = this.paginateData(
  52.         this.filteredData,
  53.         this.pageSize,
  54.         this.currentPage
  55.       )
  56.     }
  57.   },
  58.   created() {
  59.     // 调后端接口返回的全部数据(后面前端自己分页)
  60.     this.tableData = tableData
  61.   },
  62.   mounted() {},
  63.   watch: {
  64.     currentPage: {
  65.       handler(newPage) {
  66.         this.updatePaginatedData()
  67.       },
  68.       immediate: true,
  69.     },
  70.     filteredData: {
  71.       handler(newArray) {
  72.         this.updatePaginatedData()
  73.       },
  74.       immediate: true,
  75.     }
  76.   },
  77.   computed: {},
  78.   filters: {}
  79. }
  80. </script>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4