这篇文章给大家分享的是有关Elementui表格组件+sortablejs怎么实现行拖拽排序的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
10年积累的做网站、
网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先
网站设计后付款的网站建设流程，更有
大田免费网站建设让你可以放心的选择与我们合作。
运营小姐姐说想要可以直接拖拽排序的功能，原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置，拖拽操作就很方便
效果
实现方式
template部分
{{scope.row[item.prop]}}
script部分
import Sortable from '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)
}
})
}
}
}感谢各位的阅读！关于“Elementui表格组件+sortablejs怎么实现行拖拽排序”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
文章标题：Elementui表格组件+sortablejs怎么实现行拖拽排序-创新互联
文章分享：
http://cdkjz.cn/article/ecdoe.html
