Vue el-table实现拖拽 基础组件实现拖拽

基于el-table的表格组件实现表格拖拽功能

这里用到的是Sortable.js 

安装 npm install sortablejs --save

引入Sortable.js

import Sortable from "sortablejs";

具体使用：

//获取需要添加拖拽的组件
const el = document.querySelector(".el-table__body-wrapper tbody"); 
//设置拖拽的参数
const ops = {
    animation: 200, //动画时长
    handle: ".move", //可拖拽区域class
    ghostClass: "ghost", //拖拽位置样式class
    onEnd({ newIndex, oldIndex }) {},//拖拽完成回调函数（新index，旧index）
};
//初始化拖拽表格
Sortable.create(el, ops);

可自定义拖拽样式：

.ghost {
  background: #bbd9fd !important;
}
.move {
  cursor: move;
}

记得先给el-tabke 添加唯一的row-key

  <el-table :data="tableData" row-key="id">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" />
    <el-table-column label="操作" width="100" />
  </el-table>

基础组件的拖拽（引用自sortable.js中文文档）：

<div id="itxst">
    <div data-id="1">item 1</div>
    <div data-id="2">item 2</div>
    <div data-id="3">item 3</div>
</div>

//获取对象
var el = document.getElementById('itxst');
//设置配置
var ops = {
    animation: 1000,
    //拖动结束
    onEnd: function (evt) {
    console.log(evt);
    //获取拖动后的排序
    var arr = sortable.toArray();
    alert(JSON.stringify(arr));
},};
//初始化
var sortable = Sortable.create(el, ops);

更多属性事件请查阅中文文档 http://www.itxst.com/sortablejs/bqubqya3.html