Vue 进阶（幺零五）：elementUI 实现表格行列拖拽

npm install sortablejs --save

import Sortable from ‘sortablejs’

<template>  <div style="width:800px">    <el-table :data="tableData"      border      row-key="id"      align="left">     <el-table-column v-for="(item, index) in col"        :key="`col_${index}`"        :prop="dropCol[index].prop"        :label="item.label">       </el-table-column>    </el-table>    <pre style="text-align: left">      {{dropCol}}    </pre>    <hr>    <pre style="text-align: left">      {{tableData}}    </pre>  </div></template><script>import Sortable from 'sortablejs'export default {  data() {    return {      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.rowDrop()    this.columnDrop()  },  methods: {    //行拖拽    rowDrop() {      const tbody = document.querySelector('.el-table__body-wrapper tbody')      const _this = this      Sortable.create(tbody, {        group : {           name : "words",           pull : true,           put : true        },        animation : 150, //动画参数        onAdd : function(evt) {//拖拽时候添加有新的节点的时候发生该事件                    },        onUpdate : function(evt) {//拖拽更新节点位置发生该事件            console.log('onUpdate.foo:', [evt.item, evt.from]);        },        onRemove : function(evt) {//删除拖拽节点的时候促发该事件            console.log('onRemove.foo:', [evt.item, evt.from]);        },        onStart : function(evt) {//开始拖拽出发该函数            console.log('onStart.foo:', [evt.item, evt.from]);        },        onSort : function(evt) {//发生排序发生该事件
            console.log('onUpdate.foo:', [evt.item, evt.from]);        },        onEnd({ newIndex, oldIndex }) {          const currRow = _this.tableData.splice(oldIndex, 1)[0]          _this.tableData.splice(newIndex, 0, currRow)        }      })    },    //列拖拽    columnDrop() {      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')      this.sortable = Sortable.create(wrapperTr, {        animation: 180,        delay: 0,        onEnd: evt => {          const oldItem = this.dropCol[evt.oldIndex]          this.dropCol.splice(evt.oldIndex, 1)          this.dropCol.splice(evt.newIndex, 0, oldItem)        }      })    }  }}</script><style scoped></style>

_this.rootDepart.sortableObj = Sortable.create(el);// 销毁排序_this.rootDepart.sortableObj.destroy();