Vue element 表格拖拽排序

Vue element 表格拖拽排序

image.png

代码实现：
1.安装sortablejs

npm install sortablejs --save

2.引入sortablejs

import Sortable from 'sortablejs'

3.html

       
          
          
          ......
       

4.js

data() {
  return {
    sortData: [],
    sortable: null,
    oldsortData: [],
    newsortData: [],
  }
}

    async sort() {
      this.loading = true
      const data = await getOrgListNoPage()
      console.log('data', data.data);
      this.sortData = data.data
      this.loading = false
      this.sortDialog = true
      this.oldsortData = this.sortData.map(v => v.orgID)
      this.newsortData = this.oldsortData.slice()

      this.$nextTick(() => {
        this.setSort()
      })

    },
    setSort() {
      const el = this.$refs.sortTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        animation: 300,
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function (dataTransfer) {
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          dataTransfer.setData('Text', '')
        },
        onEnd: e => {
          //const targetRow = this.sortData.splice(e.oldIndex, 1)[0]
          //this.sortData.splice(e.newIndex, 0, targetRow)

          const tempIndex = this.newsortData.splice(e.oldIndex, 1)[0]
          this.newsortData.splice(e.newIndex, 0, tempIndex)

          let dragId = this.sortData[e.newIndex].orgID;//拖动行的orgID
          //this.newsortDataString = this.newsortData.join()//拖动行的id字符串
          console.log('dragId', dragId);
        }
      })
    },

5.css

.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}