element-ui的el-table，使用sortablejs改造成可拖拽排序

element-ui的el-table，使用sortablejs改造成可拖拽排序

改造成一个指令

import Sortable from 'sortablejs'

export default {
  bind(el, binding, vNode) {
    const _this = vNode.context
    const tbody = el.querySelector('.el-table__body-wrapper tbody')
    el._sortable = Sortable.create(tbody, {
      handle: '.el-table__row',
      onEnd: (data) => {
        console.log(data)
        const userList = JSON.parse(JSON.stringify(_this[binding.expression]))
        const deleteList = userList.splice(data.oldIndex, 1)
        userList.splice(data.newIndex, 0, deleteList[0])
        _this[binding.expression] = userList
        _this.$forceUpdate()
        _this.$nextTick(() => {
          vNode.componentInstance.doLayout()
        })
      }
    })
  },
  unbind(el) {
    el._sortable && el._sortable.destroy()
  }
}

注册指令

import SortableTable from './directive/sortable-table'
Vue.directive('SortableTable', SortableTable)

使用指令

<!-- row-key必须使用 -->
<el-table v-sortable-table="userList" row-key="userId" :data="userList"> 
     <el-table-column 
            key="userName"
            label="用户名称" 
            prop="userName"  />
</el-table>