iView/View UI中的表格拖动排序功能实现

2022-05-10 15点热度 0人点赞 0条评论

需求说明

项目中使用了iView(View UI),时候了表格,https://www.iviewui.com/components/table,有个需求,就是表格中的内容,需要排序,初步看了iview的文档和例子,是没有提到排序功能的。

实现

其实文档有说到:

Table props:

draggable 3.3.0 是否开启拖拽调整行顺序,需配合 @on-drag-drop 事件使用

Table events:

on-drag-drop 3.3.0 拖拽排序松开时触发,返回置换的两行数据索引 index1, index2

利用这两个,就可以实现拖动排序功能,来看下例子:

<i-table stripe border :columns="columns" :data="data" draggable @on-drag-drop="changeDataOrder"></i-table>

来看下changeDataOrder方法,在拖动后保存排序:

changeSelectedVideosOrder: function(oldIndex, newIndex) {
    oldIndex = parseInt(oldIndex)
    newIndex = parseInt(newIndex)
    let oldData = this.data[oldIndex]
    this.data.splice(oldIndex, 1, this.data[newIndex])
    this.data.splice(newIndex, 1, oldData)
}

接下来,你可以在某个时刻将修改顺序后的data保存到后台去,这里就不做过多解释了。

 

admin

这个人很懒,什么都没留下

文章评论

*

code