# 实现表格行的拖拽以及分页
# 快速导航
# 涉及到的知识
涉及到的知识
1: 如何渲染表头数据以及表格数据
2: 最右侧管理的按钮(查看,编辑,上线,下线)是怎么插入进去的
3: 管理操作(查看,编辑,上线,下线)按钮的状态显示
4: 表格的分页数据展示
5: 表格的横向拖拽实现
操作按钮状态
它的状态是根据后端返回的具体status来决定显示,隐藏以及是否禁用
1: "待发布",即编辑状态,下线按钮置灰
2: "待上线",即编辑状态,上线,下线按钮置灰
3: "已上线",即上线按钮置灰,查看按钮隐藏
100: "已结束,查看按钮显示,上下线按钮置灰
具体内容,代码就是最好的解释哈
# 具体实例效果(拖拽行)
暂无数据
# 行拖拽的具体实现
这里的拖拽主要借用的是sortablejs实现的,具体代码如下所示
import Sortable from 'sortablejs'; // 引入sortable
// 拖拽方法
dropRow(endHandle) {
const tbody = document.querySelector(
".el-table__body-wrapper tbody"
);
if (tbody) {
Sortable.create(tbody, {
animation: 300,
delay: 0,
handle: '.drop_handle',
onEnd: endHandle,
});
}
},
// 在mounted函数中
// 表格拖拽
this.$nextTick(() => {
this.dropRow((oldIndex,newIndex) => {
const currRow = this.tableData.splice(oldIndex, 1)[0]
this.tableData.splice(newIndex, 0, currRow);
})
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 整个实例代码如下所示
# 总结
表格中的数据是模拟的,具体在实际的业务里,根据后端返回的数据,前端请求后端接口,就可以了的,表格的分页也在上面
反正代码很简单,一看就懂~如有不明白的,可以喊我
