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

最近在做背景管理遇见了一个这样的需求：table列表需要支持上下移动数据，并且也需要满意跨页移动，前端把数据移动整理之后，提交给后端进行保存（寻常这种数据移动都是调用后端的接口，然后在查询数据就可以完成了，但是这次显然不能这么做，因为后端只有一个保存数据的接口，所以这就需要前端自己处置惩罚数据了，废话少说，上结果图和源码！
  

• 静态结果图
  

• 动态结果图
  
  
  
  
• 实现源码（HTML）
  

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>

复制代码

• 实现源码（JS）
  

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企服之家，中国第一个企服评测及商务社交产业平台。