这篇文章主要介绍了Elementui表格组件+sortablejs实现行拖拽排序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
运营小姐姐说想要可以直接拖拽排序的功能，原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置，拖拽操作就很方便
效果
实现方式
template部分
<p>{{scope.row[item.prop]}}</p>
script部分
import Sortable from <i style="color:transparent">本文来源gaodai$ma#com搞$代*码*网(</i>'sortablejs' export default { components: { Sortable }, data() { return { col: [ { label: '位置', prop: 'location' }, { label: '序号', prop: 'sortNum' }, { label: '经办人', prop: 'operator' }, { label: '操作', prop: 'isClick' } ] } }, mounted() { this.rowDrop() }, methods: { rowDrop() { const tbody = document.querySelector('.el-table__body-wrapper tbody') const _this = this Sortable.create(tbody, { onEnd({ newIndex, oldIndex }) { const currRow = _this.list.splice(oldIndex, 1)[0] _this.list.splice(newIndex, 0, currRow) _this.list = _this.list.filter(({ adId }) => adId !== 0) _this.list.forEach((item, index) => { _this.sortString += item.adId + ':' + (index + 1) + ',' }) _this.sortString = _this.sortString.substr(0, _this.sortString.length - 1) } }) } } }
完成！你们可以看得懂的！你可以你能行！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是Elementui表格组件+sortablejs实现行拖拽排序的示例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Elementui表格组件+sortablejs实现行拖拽排序的示例代码
转载请注明原文链接：Elementui表格组件+sortablejs实现行拖拽排序的示例代码
