vue + ElementUI 封装的公用表格table组件实现拖拽列表功能（Sortablejs）

vue + ElementUI 封装的公用表格table组件实现拖拽列表功能（Sortablejs）

vue 实现表格拖拽功能有几种方式，比如vuedraggable、vue cardDragger、vue-dragging、Sortablejs。本文主要是介绍在table是封装的公用组件的时候，使用sortablejs有时候拖拽出现效果失效、拖拽延迟（其实就是父子组件之间的通信问题，没有达到数据实时响应，有的不行也可以使用this.$set（Vue.set）改变表格数据的数组）。

Sortablejs

Sortable.js中文文档链接：http://www.itxst.com/sortablejs/neuinffi.html.

在vue里安装Sortablejs：

npm install sortablejs --save

在vue项目文件引用：方式一

import Sortable from ‘sortablejs’;

使用方法

在vue组件的mounted方法里，执行需要行拖拽或者列拖拽的方法 rowDrop()、columnDrop().
HTML

// An highlighted block
<el-table ref="table" :id="'table_'+toolbarId" :data="tableData" border :height="height" row-key="id"
@selection-change="handleSelectionChange" 
@row-click="rowclick" :row-class-name="tableRowClassName" :row-style="selectHignLiaght"
:highlight-current-row="highlightCurrentRow" @current-change="handleChange"