需要实现表格 (可以新增行, 表格中直接编辑数据，行可上下拖动重新排序)
实现效果（整行上下拖动之后，序号变化为1，2，3.......，可根据名称看效果哦）：
初始表格：
拖拽后：
1. 安装拖拽插件
npm install sortablejs --save
页面中引入 import Sortable from 'sortablejs'
2 . 页面 el-table中 添加 row-key="id" ，ref 创建拖拽时用到获取表格节点
<el-table max-height="350" ref="sortTable" :data="routeprocessList" row-key="id" >
<el-table-column width="50" align="center" prop="orderNum">
</el-table-column>
</el-table>
3. mounted函数中添加拖拽方法
mounted() {
this.rowDrop();
},
methods: {
rowDrop（）{
const table = this.$refs.sortTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
const that = this
Sortable.create(table, {
animation: 1000,
onEnd({ newIndex, oldIndex }) {
// 拖拽排序数据
that.routeprocessList.splice(newIndex, 0, that.routeprocessList.splice(oldIndex, 1)[0])
const newArray = that.routeprocessList.slice(0)
that.routeprocessList = [] // 必须有此步骤，不然拖拽后回弹
that.$nextTick(function () {
that.routeprocessList = newArray // 重新赋值，用新数据来刷新视图
this.updateIndex(that.routeprocessList)//更改列表中的序号，使序号1.2.3.4.....显示，不然就是行拖拽后乱序显示如:3.2.4.1...
})
}
});
}，
updateIndex(routeprocessList) {
routeprocessList.forEach((item, index) => {
item.orderNum = index + 1;
});
},
}
标签：表格,elementUI,routeprocessList,sortablejs,vue2,table,排序,拖拽 From： https://www.cnblogs.com/zwfbokeyuan/p/17547399.html