sortablejs +ElementUI做表格拖拽

1.引入相關庫

<link rel="stylesheet" href="element.css">
<script src="vue.js" ></script>
<script src="element.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

2.結構（Element表格必須給row-key值）

<div class="app">
   <el-table
    	row-key="name"
	    :data="tableData"
	    style="width: 100%">
	    <el-table-column type="index" label="序號" width="50"></el-table-column>
	    <el-table-column label="日期" width="120"> </el-table-column>
	    <el-table-column property="name" label="姓名" width="120">  </el-table-column>
	    <el-table-column property="address" label="地址"> </el-table-column>
	  </el-table>
</div>

2.邏輯（在mounted鉤子初始化拖拽插件）

<script type="text/javascript">
	new Vue({
		el:'.app',
		  data() {
		    return {
		    	msg:"huxiang",
		      col: [
		        {
		          label: '日期',
		          prop: 'date'
		        },
		        {
		          label: '姓名',
		          prop: 'name'
		        },
		        {
		          label: '地址',
		          prop: 'address'
		        }
		      ],
		      dropCol: [
		        {
		          label: '日期',
		          prop: 'date'
		        },
		        {
		          label: '姓名',
		          prop: 'name'
		        },
		        {
		          label: '地址',
		          prop: 'address'
		        }
		      ],
		      tableData: [
		        {
		          id: '1',
		          date: '2016-05-02',
		          name: '王小虎1',
		          address: '上海市普陀區金沙江路 100 弄'
		        },
		        {
		          id: '2',
		          date: '2016-05-04',
		          name: '王小虎2',
		          address: '上海市普陀區金沙江路 200 弄'
		        },
		        {
		          id: '3',
		          date: '2016-05-01',
		          name: '王小虎3',
		          address: '上海市普陀區金沙江路 300 弄'
		        },
		        {
		          id: '4',
		          date: '2016-05-03',
		          name: '王小虎4',
		          address: '上海市普陀區金沙江路 400 弄'
		        }
		      ]
		    }
		  },
		mounted(){
		  	this.start();
		},
		methods:{
			start(){
					document.body.ondrop = function (event) {
				             event.preventDefault();
				             event.stopPropagation();
				    };
					this.rowDrop()
			},
    		//行拖拽
		    rowDrop() {
		      	const tbody = document.querySelector('.el-table__body-wrapper tbody')
		      	const _this = this
			    Sortable.create(tbody, {
			        onEnd({ newIndex, oldIndex }) {				        	
			          const currRow = _this.tableData.splice(oldIndex, 1)[0]
			          _this.tableData.splice(newIndex, 0, currRow);
			        }
			      })
		    }
		}
	})
</script>

3.sortablejs詳細配置在此http://www.sortablejs.com/options.html好好看，好好學。