vue+Element-ui实现表格拖拽排序功能

1、首先需要下载sortablejs第三方包
2、在需要排序的页面文件里引入：

import Sortable from 'sortablejs'
data() {
return {
apiObjDrag: [],
productList:[],整个列表数据项
}
},
methods:{
//行-拖拽
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.productList.splice(oldIndex, 1)[0]
_this.productList.splice(newIndex, 0, currRow)
// 拖动后获取newIdex
let arr = Array.from(_this.productList)
_this.apiObjDrag = arr
_this.sortPro(_this.apiObjDrag)
},
})
},
sortPro(proList) {
this.http.post('productListSort', proList).then((res) => {
if (res) {
this.fetchData() //刷新页面功能
}
})
},

3、还可通过点击列表上下箭头进行排序

<el-table-column
label="序号"
type="index"
:index="indexMethod"
width="80"
align="center"

        <template slot-scope="scope">
          <i
            class="el-icon-caret-top"
            style="cursor: pointer;"
            @click="sortProUp(scope.row)"
          ></i>
          <span>{{ scope.$index + 1 }}</span>
          <i
            class="el-icon-caret-bottom"
            style="cursor: pointer;"
            @click="sortProDown(scope.row)"
          ></i>
        </template>
      </el-table-column>

// 下调序号
sortProDown(productObj) {
const proList = this.productList
const _index = _.indexOf(proList, productObj)
if (_index < proList.length - 1) {
const temp = proList[_index]
proList[_index] = proList[_index + 1]
proList[_index + 1] = temp
this.sortPro(proList)
}
},

//上调
sortProUp(productObj) {
const proList = this.productList
const _index = _.indexOf(proList, productObj)
if (_index > 0) {
const temp = proList[_index]
proList[_index] = proList[_index - 1]
proList[_index - 1] = temp
this.sortPro(proList)
}