View UI Table表格拖拽排序
效果如下:
- draggable 是否开启拖拽调整行顺序,需配合 @on-drag-drop 事件使用 默认 false
- on-drag-drop 拖拽排序松开时触发,返回置换的两行数据索引 默认 index1, index2
使用 View UI Table 表格拖拽 需要添加 draggable 属性如下:
<Table :columns="columns" :data="dataList" :draggable="true" @on-drag-drop="TableDragDrop"></Table>
TableDragDrop(index, newIndex) {
this.dataList.splice(endIndex, 1, ...this.dataList.splice(index, 1, this.dataList[endIndex]))
},
切记此时只是在前端做了顺序调动,如需保存当前排序需要将数据传给后端。