Elementui表格組件+sortablejs怎么實現(xiàn)行拖拽排序

這篇文章給大家分享的是有關Elementui表格組件+sortablejs怎么實現(xiàn)行拖拽排序的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

運營小姐姐說想要可以直接拖拽排序的功能，原來在序號六的廣告可能會因為金主爸爸加錢換到序號一的位置，拖拽操作就很方便

效果

實現(xiàn)方式

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: '經(jīng)辦人',
   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怎么實現(xiàn)行拖拽排序”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！