Elementui表格组件+sortablejs实现行拖拽排序的示例代码

前言

运营小姐姐说想要可以直接拖拽排序的功能，原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置，拖拽操作就很方便

效果

实现方式

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

完成！你们可以看得懂的！你可以你能行！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。