Element: [Feature Request] Using vue-sortable with el-table?

[pranav-smpx]

Existing Component

Yes

Component Name

El-Table

Description

Basically the title. Is it possible to use el-table with vue-sortable or sortable? I am looking for ways to rearrange the rows of table through drag and drop.

Thanks!

[EmilyRosina]

We're wanting to use Element but need some way of dragging the rows of a table so to allow reordering.
We're at a midway stop now as element doesn't have this built in, however vue-draggable and vue-sortable go someway to providing this functionality. Just how we combine it all is hurting my head a bit, as Element markup only specifies columns, not rows..

Help! Anyone found a fix?

Update: This link is VERY helpful to find a solution that is non Element UI specific

[helios741]

@EmilyRosina Hello，i met the same problem as you, do you have a solution? thanks

[steffanhalv]

Me to, I tried with vuedraggable:

<draggable
        v-model="items"
        @end=""
        :options="{draggable: '.item', scroll: true, group: {name: 'items', pull: 'clone', put: false}}">
        <el-table
            row-class-name="item"
            ref="items"
            @selection-change="selection"
            :data="items">
            <el-table-column
              fixed
              type="selection"
              width="40">
            </el-table-column>
          <el-table-column
              label="Name">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name"
                placeholder="Name"></el-input>
            </template>
          </el-table-column>
        </el-table>
</draggable>

But it does not work..

[Leopoldthecoder]

https://jsfiddle.net/gozhg07a/1/ Note that row-key is necessary to get a correct row order.

[blackmiaool]

Based on @Leopoldthecoder 's code I wrote a component that can make el-table sortable without row-key.

https://gist.github.com/blackmiaool/ccb74bc87eeeb71c864aeceaf197bdb4

It destroys and creates the e-table every time you drag the the rows, so that you can use it without "row-key".
It also keeps the position of the scrollbar to prevent flickering.

[Lara-gru]

I find very simple solution - module https://github.com/WakuwakuP/element-ui-el-table-draggable
It's based on sortablejs.
Just import module and put tag <el-table-draggable>!
<el-table-draggable> <el-table> ...... </el-table> </el-table-draggable>

[jggj21]

Can any one help me, I need to apply it to drag but based on the whole column as well as this example: https://sortablejs.github.io/Vue.Draggable/#/table-column-example, but I am working with element- ui -el-table-draggable https://github.com/WakuwakuP/element-ui-el-table-draggable

[dnkTin]

Can any one help me, I need to apply it to drag but based on the whole column as well as this example: https://sortablejs.github.io/Vue.Draggable/#/table-column-example, but I am working with element- ui -el-table-draggable https://github.com/WakuwakuP/element-ui-el-table-draggable

I think you can drag the header (th tag) of the table. On the onEnd method of sortablejs, the data of table can be reordered - in this case reorder the key in each object in order to change the order of the column - based on the index (newIndex and oldIndex) passing to the onEnd method.
I found this example, you can follow it.
https://github.com/ElemeFE/element/issues/3543

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

[cloydlau]

在踩了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>