表格可拖拽排序 - Githubissues

业务中碰到这样一个需求. 点击按钮拖拽排序后, el-table就进入了可拖拽的模式.

稍加百度了一下.发现了一个可以用的插件. sortable.js 下载插件 npm install sortable.js --save （下载的时候一定要这样去下载，不要去下载 npm install sortable--save ）因为sortable.js和sortable是不一样的哈引入 import Sortable from 'sortablejs'; // 千万不要加点.js 否者就会报错create不是一个方法

  // 拖拽表格
    dragTable () {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        handle: '.allowDrag',
        onEnd ({newIndex, oldIndex}) {
          const dragTable = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, dragTable)
        }
      })
    },
  // mouted 时挂载
    mounted () {
    this.dragTable()
  },
这样表格就能拖拽了.  但刚开始的时候 这种操作和需求并不算匹配,因为页面挂载好了 就会自动变成可拖模式,
而需求希望点击排序才可以拖拽. 思考之后, 决定给表格column加个类名 allowDrag
        <el-table-column
            label="序号"
            type="index"
            head-align="center"
            align="center"
            width="120"
            :class-name="sorting? 'allowDrag':''"
        ></el-table-column>
通过点击按钮控制sorting字段来控制类.这样就可以达到效果了.

最后值得一提的element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。
      <el-table
          v-loading="tableLoading"
          :data="tableData"
          :row-style="rowStyle"
          row-key="id"
          :height="scope.height"
      >

扩展: 如果要做列拖拽的话

    //列拖拽
    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)
        }
      })
    }

xuanweiH / Project-issue

表格可拖拽排序 #3