Elementui表格組件+sortablejs實現行拖拽排序的示例代碼

<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>

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)
 }
 })
 }
 }
}