前端基于VUE+ElementUI实现table行上移或下移(支持跨页移动)
最近在做背景管理遇见了一个这样的需求：table列表需要支持上下移动数据，并且也需要满意跨页移动，前端把数据移动整理之后，提交给后端进行保存（寻常这种数据移动都是调用后端的接口，然后在查询数据就可以完成了，但是这次显然不能这么做，因为后端只有一个保存数据的接口，所以这就需要前端自己处置惩罚数据了，废话少说，上结果图和源码！[*]静态结果图
https://img-blog.csdnimg.cn/direct/7b574871b7644def8970ad4ac05efe73.png#pic_center
[*]动态结果图
https://img-blog.csdnimg.cn/direct/d4eb739cc09a427094dbf85c95da62a4.gif#pic_center
[*]实现源码（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>
[*]实现源码（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))
: arr.splice(index, 1, ...arr.splice(index + 1, 1, arr))
}
[*]详情源码(仅展示参数)
<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))
: arr.splice(index, 1, ...arr.splice(index + 1, 1, arr))
},
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() {
// 调后端接口返回的全部数据(后面前端自己分页)
this.tableData = tableData
},
mounted() {},
watch: {
currentPage: {
handler(newPage) {
this.updatePaginatedData()
},
immediate: true,
},
filteredData: {
handler(newArray) {
this.updatePaginatedData()
},
immediate: true,
}
},
computed: {},
filters: {}
}
</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]