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

最近有个对指定列表手动排序的需求，项目用的是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)
    }

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

下课！！！