这篇文章给大家分享的是有关Elementui表格组件+sortablejs怎么实现行拖拽排序的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联公司长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为灵台企业提供专业的网站建设、成都做网站，灵台网站改版等技术服务。拥有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://bjjierui.cn/article/pehici.html
