深圳门户网站建设/举例说明seo

element ui 表格实现拖拽排序的功能，可以借助第三方插件Sortablejs来实现。

引入sortablejs

npm install sortablejs --save

组件中使用

import Sortable from 'sortablejs';

 <el-table ref="el-table":data="listData" row-key="id" style="width: 100%"></el-table>

注意：el-table一定要设置row-key，且row-key绑定的值唯一，不然拖拽可能乱序

 mounted() {this.initSort()},initSort() {const el = this.$refs['el-table'].$el.querySelector('.el-table__body-wrapper > table > tbody')let _this = this;const ops = {animation: 200, //动画时长handle: ".el-table__row", //可拖拽区域class//拖拽中事件onMove: ({ dragged, related }) => {const oldRow = _this.listData[dragged.rowIndex] //旧位置数据const newRow = _this.listData[related.rowIndex] //被拖拽的新数据},//拖拽结束事件onEnd: evt => {const curRow = _this.listData.splice(evt.oldIndex, 1)[0]_this.listData.splice(evt.newIndex, 0, curRow)}}Sortable.create(el, ops)},