当前位置: 代码迷 >> 综合 >> iview 拖拽Table 表格实现手动排序
  详细解决方案

iview 拖拽Table 表格实现手动排序

热度:52   发布时间:2024-02-21 02:32:34.0

最近有个对指定列表手动排序的需求,项目用的是iview组件,看看了看官方 API 好像没有这样的例子,本以为要凉凉,结果一百度,发现 iview 其实提供了相应的方法,只是没写出一个可以直接用的DEMO而已,以后看文档开始要多想想哪个和哪个可以组合到一起,不然就受限于官方API提供的DEMO,这样很不好!

看看官方文档说了啥 ?!

  • 首先是 Table 的 draggable 属性,官方API 里给出的解释是:是否开启拖拽调整行顺序,需配合 @on-drag-drop 事件使用
  • 然后是 @on-drag-drop 事件 ,官方API的解释:拖拽排序松开时触发,返回置换的两行数据索引(index1,index2)

这其实就可以了嘛!

上菜 !

HTML

 <Table:columns="columns":data="dataList"draggable@on-drag-drop="changeOrder">
</Table>

JS

 changeOrder(oldIndex, newIndex) {oldIndex = parseInt(oldIndex)newIndex = parseInt(newIndex) let oldData = this.dataList[oldIndex]this.dataList.splice(oldIndex, 1, this.dataList[newIndex])this.dataList.splice(newIndex, 1, oldData)}

顺序号直接使用索引就行了呗

下课!!!

  相关解决方案