Elementui表格组件+sortablejs实现行拖拽排序的示例代
编程学习 2021-07-04 15:51www.dzhlxh.cn编程入门
这篇文章主要介绍了Elementui表格组件+sortablejs实现行拖拽排序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
前言
运营小姐姐说想要可以直接拖拽排序的功能，原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置，拖拽操作就很方便
效果
实现方式
template部分
<el-table
v-loading="loading"
:default-sort="{prop: 'sortNum', order: 'ascending'}"
:data="list"
border
align="left"
>
<el-table-column
show-overflow-tooltip
v-for="(item, index) in col"
:key="`col_${index}`"
:prop="col[index].prop"
:label="item.label"
>
<template slot-scope="scope">
<p>{{scope.row[item.prop]}}</p>
</template>
</el-table-column>
</el-table>
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)
}
})
}
}
}
完成！你们可以看得懂的！你可以你能行！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。