# 实现表格行的拖拽以及分页

# 快速导航

# 涉及到的知识

涉及到的知识

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

# 整个实例代码如下所示

# 总结

表格中的数据是模拟的,具体在实际的业务里,根据后端返回的数据,前端请求后端接口,就可以了的,表格的分页也在上面

反正代码很简单,一看就懂~如有不明白的,可以喊我

白色

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐