个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
34
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章antdesign-vue结合sortablejs实现两个table相互拖拽排序功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
本来想在网上看看有没有基于antdesign做的，然后发现是真的少啊！废话不多说，先上图:
首先先来认识一下这个插件:sortablejs 大家可以去细读一下它的api文档:
这边我就着重介绍一下我用到的api。 1.group可以传入对象，参数值为name,pull,put, name:如果是要两个列表下进行拖动的话，name的值必须为一样； pull:pull用来定义从这个列表容器移动出去的设置，true/false/‘clone'/function 。
put:put用来定义往这个列表容器放置列表单元的的设置，true/false/[‘foo',‘bar']/function； 。
2.animation ms, number 单位：ms，定义排序动画的时间； 3. handle: 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动（你想让哪个元素拖动就绑定这个元素的class）； 4. onstart:function(evt){}开始拖拽的回调方法； 5. onupdate:function(evt){}列表内元素顺序更新的回调方法； 6. onadd:function(evt){}元素从一个列表拖拽到另一个列表的回调方法； 7. onremove:function(evt){} 元素从列表中移除进入另一个列表的回调方法； 这个需求用到这些api也就足够了.
1.第一步先初始化sortable方法，因为我们的需求是两个表格拖拽，所以初始化2个方法。 html代码 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<s-table
ref=
"table"
size=
"default"
class=
"left-table"
rowkey=
"key"
:columns=
"columns"
:data=
"loaddata"
>
</s-table>
<s-table
class=
"sort-table"
ref=
"table2"
size=
"default"
class=
"left-table"
rowkey=
"key"
:columns=
"columns"
:data=
"loaddata"
>
</s-table>
|
具体的columns 和loaddata就不多余阐述.
js代码 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
import sortable from
'sortablejs'
methods:{
// 初始化 sortable 实现拖动
initsortable () {
var
that =
this
var
el =
this
.$el.queryselector(
'.sort-table tbody'
)
sortable.create(el, {
handle:
'.ant-table-row'
,
animation: 150,
group: { name:
'name'
, pull:
true
, put:
true
},
onupdate:
function
(evt) {
},
// 开始拖拽的时候
onstart:
function
(evt) {
},
onadd:
function
(evt) {
},
onremove:
function
(evt) {
}
})
},
initsortable1 () {
var
that =
this
var
el =
this
.$el.queryselector(
'.left-table tbody'
)
sortable.create(el, {
handle:
'.ant-table-row'
,
animation: 150,
group: { name:
'name'
, pull:
true
, put:
true
},
onupdate:
function
(evt) {
},
// 开始拖拽的时候
onstart:
function
(evt) {
},
onadd:
function
(evt) {
},
onremove:
function
(evt) {
}
})
},
}
|
关于handle所取的class，因为我们是要对antdesign表格的每一行进行拖拽，所以要选取到他每一行的class.
至此两个table之间就可以实现拖拽效果，但仅仅只是拖拽效果。 因为这样拖拽之后，两边的数据源并没有发生变化，而且明明已经拖拽过来之后，另一边的表格的展示页会存在错误:
排序是我右边表格特有的，但是这边的表格是不需要这个排序的，而且如果拖拽成功的话为什么还会显示暂无数据呢，最后左边表头的checkbox也无法选中。所以到此为止只是有拖拽效果而已。 2.在拖拽动作之后，把左右两边的数据源重新赋值，这里有两种实现思路:
考虑到性能消耗，我就选择了第二种： 1）定义左右两边的数据源数组 。
|
1
2
3
4
5
6
7
|
data(){
return
{
unmatchedlist: [],
// 左边未匹配的数据
datalist: [],
// 右边已匹配的数据
pullindex ：
''
，
//原数组拖拽元素的下标
}
}
|
2)在每一次remove或者add的时候更新数据源，这里只写了一个表格拖拽的方法，另一个只要把that.datalist和that.unmatchedlist左右两边的数据源赋值调换一下就行，就不贴重复代码了 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
// 开始拖拽的时候
onstart:
function
(evt) {
that.pullindex = evt.oldindex
},
onadd:
function
(evt) {
//evt.newindex 移入到新数组的下标
//pullindex 原数组拖拽元素的下标
that.datalist.splice(evt.newindex, 0, that.unmatchedlist[that.pullindex])
that.datalist.foreach((item, index) => {
item.sort = index + 1
})
//通知table视图更新
that.$nexttick(() => {
that.$refs.table2 &&
this
.$refs.table2.refresh(
true
)
that.$refs.table &&
this
.$refs.table.refresh(
true
)
})
},
onremove:
function
(evt) {
that.datalist.splice(evt.oldindex, 1)
that.datalist.foreach((item, index) => {
item.sort = index + 1
})
that.$nexttick(() => {
that.$refs.table2 &&
this
.$refs.table2.refresh(
true
)
that.$refs.table &&
this
.$refs.table.refresh(
true
)
})
}
})
|
3）实现同一个表格上下拖拽排序 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
initsortable () {
var
that =
this
var
el =
this
.$el.queryselector(
'.sort-table tbody'
)
sortable.create(el, {
handle:
'.ant-table-row'
,
animation: 150,
group: { name:
'name'
, pull:
true
, put:
true
},
//这里千万不要用onend 方法
onupdate:
function
(evt) {
var
o = evt.oldindex
var
n = evt.newindex
if
(o === n) {
return
}
that.sortlistandupdate(that.datalist, o, n)
},
})
},
// 对数据进行排序，要求 o（oldindex） 和 n（newindex） 从 0开始
sortlist (list, o, n) {
var
newtabledata = json.parse(json.stringify(list))
var
data = newtabledata.splice(o, 1,
null
)
newtabledata.splice(o < n ? n + 1 : n, 0, data[0])
newtabledata.splice(o > n ? o + 1 : o, 1)
return
newtabledata
},
/**
* 对数据排序并更新 table， 要求 o（oldindex） 和 n（newindex） 从 0开始
*/
sortlistandupdate (list, o, n) {
var
newtabledata =
this
.sortlist(list, o, n)
newtabledata.foreach((item, index) => {
item.sort = index + 1
})
this
.$nexttick(() => {
this
.datalist = newtabledata
that.$refs.table2 &&
this
.$refs.table2.refresh(
true
)
})
},
|
这边我们选用onupdate方法来排序，不要用onend方法，因为只要你有拖拽效果，都会去触发onend方法，导致左右拖拽完后又会触发一次排序.
到此这篇关于antdesign-vue结合sortablejs实现两个table相互拖拽排序功能的文章就介绍到这了,更多相关antdesign-vue实现拖拽排序内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。
原文链接：https://blog.csdn.net/zwd862375698/article/details/112317952 。
最后此篇关于antdesign-vue结合sortablejs实现两个table相互拖拽排序功能的文章就讲到这里了,如果你想了解更多关于antdesign-vue结合sortablejs实现两个table相互拖拽排序功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
34
4
0
我有一张 Excel 表格，用于更新玩家评分。 播放器 配售 初始化 1 2 3 4 金融评级 一个 1 2.0 1.000 0.018 0.016 0.014 2.007 D 2 -2.0 54.5
我有一个 map = std::map ，其中 myItemModel继承QAbstractItemModel . 我现在要合并所有 myItemModel合一myItemModel (其他所有元素模
我大量使用“do.call”来生成函数调用。例如: myfun <- "rnorm"; myargs <- list(n=10, mean=5); do.call(myfun, myargs); 但是
想象一下 InputStream 的以下变体: trait FutureInputStream { //read bytes asynchronously. Empty array means E
这是我的 C 代码: #include void sum(); int newAlphabet; int main(void) { sum();
我只是想选择类“.last”之后的每个元素。 HTML: 1 2 Jquery
我正在为一个项目构建一个 XML 反序列化器，我经常遇到这种类型的代码情况: var myVariable = ParseNDecimal(xml.Element("myElement")) == n
这是来自 Selecting the highest salary 的继续问题 假设有一个表 'wagetable' name lowhours highhours wage pri
我正在为我的程序创建一个战舰程序；该程序运行良好，但我试图确保当用户将坐标超出范围时，程序会说他们输入的坐标不正确。这是代码: #include #include void
我有一个函数，它为每种情况返回不同的 DWORD 值，如果出现错误。所以我有以下定义: #define ERR_NO_DB_CONNECTION 0x90000 #define ERR_DB_N
在派生类中引发基类事件以下简单示例演示了在基类中声明可从派生类引发的事件的标准方法。此模式广泛应用于 .NET Framework 类库中的 Windows 窗体类。在创建可用作其他类的基类的类时，应
我只是想知道这是否可能: use Modern::Perl; my @list = ('a' .. 'j'); map { func($_) } each(@list); sub func { m
我一直在使用 =IF(L2="","Active",IF(K2I2,"Late"))) 有效，但现在我需要检查 F 上的多个条件 专栏 我试过了 OR 函数 =IF(OR(F2="Scheduled"
我有 2 个命令，如下所示。 在视频中添加介绍图片 ffmpeg -y -loop 1 -framerate 10 -t 3 -i intro.png -i video.mp4 -filter_com
好的，我有这个公式可以根据名字和姓氏列表生成用户名。现在，虽然这可行，但我希望单元格改为引用我自己的 VBA 函数。但是，由于代码少得多，我仍然想使用原始公式。 我有这个公式: =SUBSTITUTE
我有两个 HAProxy 实例。两个实例都启用了统计信息并且工作正常。 我正在尝试将两个实例的统计信息合并为一个，以便我可以使用单个 HAProxy 来查看前端/后端统计信息。我试图让两个 hapro
我有一个 Observable，其中每个新值都应该引起一个 HTTP 请求。在客户端，我只关心最新的响应值；但是，我希望每个请求都能完成以进行监控/等。目的。 我目前拥有的是这样的: function
我的网站上有 TinyMCE 插件。在 TinyMCE 插件的 textarea 中添加图像时，我希望这些图像包含延迟加载。我网站的缩略图具有特定类型的延迟加载，其中 src 图像是灰色背景。根据用户
我希望合并润滑间隔，以便如果它们重叠，则从内部第一个时间获取最小值和从内部最后一个时间获取最大值并总结以创建一个跨越整个时间段的新间隔。这是一个reprex: library(lubridate, w
我有一个应用程序，它本质上是一个页眉、主要内容和一个始终可见的页脚。页脚可以改变大小，我想在页脚上方的主内容面板上放置一些工具。主要布局是用 flex 完成的，我阅读文档的理解是绝对定位通过相对于最近
我是一名优秀的程序员,十分优秀！