怎么用sortable实现el-table行拖动样式

Question

html

<el-table tooltip-effect="light" :row-key="getRowKeyscx" :data="cxl" height="242"  width="1000" :show-header="false" @selection-change="cxd" ref="tablecx" class="tablecx">
<el-table-column type="selection"  width="50" style="margin-left: 10px"></el-table-column>
<el-table-column >
    <template>
        <img src="../../assets/images/exam/tuodong.png" height="14" width="20" style="" />
    </template>
</el-table-column>
</el-table>

js

const table = document.querySelector('.tablerx tbody')
            Sortable.create(table, {
              onEnd: evt => {  //监听拖动结束事件
                this.rxpx(evt.oldIndex,evt.newIndex)//执行排序
              }
            })

怎么改成实现这样的效果

Answer 1

或者有什么样例网页吗？

Answer 2

配置选中样式：

const table = document.querySelector('.tablerx tbody')
Sortable.create(table, {
    onEnd: evt => { //监听拖动结束事件
        this.rxpx(evt.oldIndex, evt.newIndex) //执行排序
    },
    chosenClass: 'sortable-chosen' // 选中样式
})

修改样式：

<style lang="scss">
    .sortable-chosen:not(th) {
        box-shadow: 0 0 0 1px #409eff inset;
    }
    .el-table:before {
        height: 0;
    }
    .el-table td {
        border: none;
    }
    .el-table__body tr:hover > td {
        background-color: transparent !important;
    }
</style>

el-table不要设置border属性，不然要去覆盖td的边框样式。

---

我好像回答过你的另外一个问题，还是建议添加背景色，改动最少。