[Feature Request] 功能改进建议: 希望el-table支持拖拽排序

[istobran]

http://element.eleme.io/#/zh-CN/component/table
看了官方文档之后发现这个表格是按列实现的
这也导致了el-table没办法直接使用vue.draggable和vue-sortable组件库来进行拖拽排序
希望el-table能够实现行的拖拽排序

[ilvsx]

+1

[ilvsx]

不过目前可以用 https://github.com/RubaXa/Sortable 来做拖拽

import Sortable from 'sortablejs'

let el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
let sortable = Sortable.create(el)

[SidFeng]

+1 其实只要能让我把属性draggable="true" 加到行上去就可以，目前好像不能单独对行增加属性

[zzzgit]

有些公司会有这个需求，希望加上这个功能

[zzzgit]

https://github.com/RubaXa/Sortable 拖拽之后，数据模型的顺序并不会跟着变，这是个麻烦事

[loca-spirit]

同求此问题，拖拽列，并且再次的resize，如果只是拖拽还好，但是还需要再次resize，数据模型并没有跟着变，楼上有解决方案吗，还是换了控件？

[yobi-maggie]

同求此功能

[ark930]

同求

[guaizi149]

同求

[Leopoldthecoder]

提供一个结合 Sortable 的例子：https://jsfiddle.net/gozhg07a/

关于数据模型，其实 Sortable 提供了 onEnd 钩子，上面的例子就是在这个钩子里完成了数据的同步。

[Andyliwr]

@Leopoldthecoder 通过splice改变了数组(this.products)，但是页面上表格行的顺序并未刷新的问题该如何解决呢?

[aweiu]

@Andyliwr 我目前是调用el-table实例的$destory和$mount方法实现重绘的。。
更彻底点可通过v-if实现重绘

[Ray-56]

@aweiu 我的好像还是不行 你是如何实现的呢

[BlackEyeByLee]

用sortable.js其实可以做到列拖动或者行拖动

    <el-table border max-height="400" :data="tableData" tooltip-effect="dark" size="mini" @row-dblclick="rowDblClick">

      <el-table-column :type='dataTheadList[index] === "selection" ? "selection" : ""' :prop="dataTheadList[index]" show-overflow-tooltip :label='item' v-for="(item, index) in elTheadList" :key="`thead_${index}`">
      </el-table-column>
    </el-table>

  const el = document.querySelectorAll('.el-table__header-wrapper tr')[0]

  this.sortable = Sortable.create(el, {
    filter: '.el-table-column--selection',
    disabled: true, // 禁用
    animation: 180,
    delay: 0,
    setData: function(dataTransfer) {
      dataTransfer.setData('Text', '')
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
    },
    onEnd: evt => {
      // 拖动时sortTable改变了el，
      // 手动转换data
      const oldItem = this.dataTheadList[evt.oldIndex]
      this.dataTheadList.splice(evt.oldIndex, 1)
      this.dataTheadList.splice(evt.newIndex, 0, oldItem)
    }
  })

[Palenew]

真的很需要行排序 😂
sortable之前用toArray导出顺序上传，elementUI不方便给tr添加 dataIdAttr ，就没法直接导出了。

[pyuany]

+1

[ahDDD]

在el-dialog中使用, 需要加一个setTimeout才能使用? 这是为何
jsfiddle

[zzzgit]

nextTick可以嗎

[appleCXT]

很需要行拖拽，还有跟后台的数据交互灵活些，用sortablejs onMove无法获取拖拽前节点的数据，不是单单获取节点的html

[jocabrera]

How use Sortable.js with Element table columns?

[jocabrera]

Here is an example of how drag-drop columns with Sortable.js

https://jsfiddle.net/gozhg07a/295/

[c4cat]

如果发现view无论如何都没有更新, 尝试加上row-key

[BlackHole1]

+1 很需要这个功能

[Ray-56]

@jocabrera
not column. how to use row

[jocabrera]

@guokangf
using drag and drop in the row. https://jsfiddle.net/gozhg07a/416/

[Hanzhuo0322]

附议

[MohitTilwani15]

Has anyone tried show and hide columns using checkbox group and also drag and drop. the checkbox group has different checkboxes based on number of columns and toggling checkboxes will show/hide the column and also drag and drop works fine with it?

[liub1934]

表格数据没有重绘的加个row-key就行了，row-key和ID一样需要设置唯一的一个字段名

[Ray-56]

@liub1934 That's true!! use sortable.js

[Lara-gru]

Try this https://github.com/WakuwakuP/element-ui-el-table-draggable for el-tabel - drag-n-drop row

[zymchan]

提供一个结合 Sortable 的例子：https://jsfiddle.net/gozhg07a/

关于数据模型，其实 Sortable 提供了 onEnd 钩子，上面的例子就是在这个钩子里完成了数据的同步。

这里你使用了钩子 但是还是需要绑定唯一的row-key。能不能不绑定row-key？

[Elm1992]

Here is an example of how drag-drop columns with Sortable.js

https://jsfiddle.net/gozhg07a/295/
@jocabrera

hi bro, using drag and drop in the columns,The table will flash.
Look forward to your favourable reply.
demo: https://codepen.io/xxlion/pen/abzjKMg

[sunmaolin]

树形表格拖拽排序真的很费脑，看来官方是不考虑这个功能了

[freemedom]

我在el-table上使用clone，但是每次clone都会在原table中加入clone出来的el-table无法控制的一行，更新数据后table中仍会保留clone的这一行。（row-key不管用）解决办法是

我目前是调用el-table实例的$destory和$mount方法实现重绘的。。
更彻底点可通过v-if实现重绘

不过我没理解$mount是怎么用的，我是用的v-if @aweiu