vue基于element table表格拖拽

element表格没有自带的拖拽排序的功能，但是可以借助第三方插件Sortablejs来实现

SortableJS中文网

http://www.sortablejs.com

页面预览：

vue基于element table表格拖拽页面预览

实现过程：

1. 安装Sortable.js

npm install sortablejs --save

2. 在需要此功能的页面中引入

import Sortable from 'sortablejs'

注意：需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。 但是不可用index，因为拖拽后index会变，会有问题。

代码：

html布局

<template>
  <div class="table-wrap">
    <div class="table-box">
      <h4>vue基于element table表格拖拽：</h4>
      <el-table :data="tableData" border stripe 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>
    </div>
    <hr>
    <div class="datashow-box">
      <div class="columndata">
        <h4>列拖拽时的数据变化：</h4>
        <pre style="text-align: left">{{dropCol}}</pre>
      </div>
      <div class="rowdata">
        <h4>行拖拽时的数据变化：</h4>
        <pre style="text-align: left">{{tableData}}</pre>
      </div>
    </div>
  </div>
</template>

js核心代码

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-01',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 101 弄'
        },
        {
          id: '2',
          date: '2016-05-02',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 102 弄'
        },
        {
          id: '3',
          date: '2016-05-03',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 103 弄'
        },
        {
          id: '4',
          date: '2016-05-04',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 104 弄'
        }
      ]
    }
  },
  mounted () {
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
    // 行拖拽
    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)
        }
      })
    },
    // 列拖拽
    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)
        }
      })
    }
  }
}

页面预览

http://demo.daipianpian.com/sortable-element-table/npm-way/

github地址

https://github.com/daipianpian/sortable-element-table