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

Created on 16 Mar 2017  ·  33Comments  ·  Source: ElemeFE/element

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

table
Source
picture istobran
👍34

Most helpful comment

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

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

picture Leopoldthecoder on 24 Nov 2017
👍12

All 33 comments

+1

ilvsx picture ilvsx on 22 Mar 2017

不过目前可以用 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)
ilvsx picture ilvsx on 22 Mar 2017
👍12

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

SidFeng picture SidFeng on 30 Mar 2017

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

zzzgit picture zzzgit on 25 Apr 2017
👍1

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

zzzgit picture zzzgit on 25 Apr 2017
👍2

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

loca-spirit picture loca-spirit on 24 Jul 2017

同求此功能

yobi-maggie picture yobi-maggie on 4 Aug 2017

同求

ark930 picture ark930 on 10 Aug 2017

同求

guaizi149 picture guaizi149 on 24 Nov 2017

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

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

Leopoldthecoder picture Leopoldthecoder on 24 Nov 2017
👍12

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

Andyliwr picture Andyliwr on 30 Nov 2017
👍6

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

aweiu picture aweiu on 25 Jan 2018
👍1

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

Ray-56 picture Ray-56 on 22 Mar 2018

用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)
    }
  })
BlackEyeByLee picture BlackEyeByLee on 23 Mar 2018
👍1

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

Palenew picture Palenew on 8 Apr 2018

+1

pyuany picture pyuany on 25 Apr 2018

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

ahDDD picture ahDDD on 7 Jun 2018

nextTick可以嗎

zzzgit picture zzzgit on 7 Jun 2018

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

appleCXT picture appleCXT on 8 Jun 2018

How use Sortable.js with Element table columns?

jocabrera picture jocabrera on 23 Jul 2018

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

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

jocabrera picture jocabrera on 24 Jul 2018
👍8

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

c4cat picture c4cat on 18 Aug 2018
👍1

+1 很需要这个功能

BlackHole1 picture BlackHole1 on 21 Aug 2018

@jocabrera
not column. how to use row

Ray-56 picture Ray-56 on 21 Aug 2018

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

jocabrera picture jocabrera on 21 Aug 2018
👍8

附议

Hanzhuo0322 picture Hanzhuo0322 on 29 Aug 2018

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?

MohitTilwani15 picture MohitTilwani15 on 3 Sep 2018

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

liub1934 picture liub1934 on 12 Sep 2018

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

Ray-56 picture Ray-56 on 2 Nov 2018

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

Lara-gru picture Lara-gru on 1 Feb 2019
👍2

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

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

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

zymchan picture zymchan on 19 Feb 2019

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

xxLion picture xxLion on 16 Jan 2020
🎉1

在踩了n个坑之后终于是完美解决了 并不需要什么重绘 只要提供正确的row-key 就可以正常更新视图没有问题 自己封装了个组件——git地址 还涉及了行的增加和删除 之前用v-if、$destroy+$mount都不太行 后来用赋值之前先清空的方式是可以的 但是仍然存在隐患 在比较复杂的场景中 比如涉及表单填值啥的 就会出现bug

key值的生成方案看了好几种 首先用index肯定是不行的 这个大家都知道 如果纯展示可能不会出现什么bug 一旦对列表进行修改 bug就来了。随机数的话 可以是可以 但是必须是生成好以后再传入 不能动态去生成这个随机数。还看到一种用weakmap的方案 但是个人实际使用下来 在存在增加行操作的时候 还是有报key值重复的错。最终我是用uuid去做的

npm i elastic-list

<ElasticList v-model="value">
  <el-table-column label="a" prop="a"/>
  <el-table-column label="b" prop="b"/>
</ElasticList>
cloydlau picture cloydlau on 10 Jul 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mochenxm picture mochenxm  ·  3Comments
Kingwl picture Kingwl  ·  3Comments
zhguokai picture zhguokai  ·  3Comments
yubo111 picture yubo111  ·  3Comments
no5no6 picture no5no6  ·  3Comments