Element表格拖拽排序

» 介绍

使用 SortableJS 插件实现表格拖拽排序功能。SortableJS 基于原生html5拖放API，支持触屏和大部分浏览器。

效果图：

---

1.安装

npm install sortablejs --save

2.引入

import Sortable from 'sortablejs'

3.表格设置 row-key 和 ref

<el-table :data="tableList" border row-key="id" ref="dragTable">

4.初始化

  mounted() {
    this.initDropTable();
  },
  methods: {
  	initDropTable () {
		const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      	const _this = this;
      	Sortable.create(el, {
      		// handle: ".my-handle", //设置指定列作为拖拽
        	onEnd ({ newIndex, oldIndex }) {
	          	const currRow = _this.tableList.splice(oldIndex, 1)[0];
	          	_this.tableList.splice(newIndex, 0, currRow);
	          	console.log(newIndex, oldIndex, currRow);
        	}
      	})
    },
  }

可配置 handle 指定列作为拖拽目标，在对应 el-table-column上添加handle的值作为类名即可。其它配置可参考：http://www.sortablejs.com/options.html

5.鼠标样式

<style lang="scss" scoped>
/deep/.el-table__row {
  cursor: move;
}
</style>

---

SortableJS 官网：http://www.sortablejs.com/index.html