Use sorTableJS to drag and drop on the Element table

import Sortable from 'sortablejs'

   / / drag and drop
    rowDrop(isSort) {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      var sort = Sortable.create(tbody, {
        sort: isSort,
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableDataList.splice(oldIndex, 1) [0]
          _this.tableDataList.splice(newIndex, 0, currRow)
          console.log(_this.tableDataList)
        }
      })
      if (!isSort) {
        sort.destroy();
      }
    },
    
        / / sorting
    handleSort(){
      this.listLoading = true
      this.tableDataListOld = JSON.parse(JSON.stringify(this.tableDataList)) 
      // Query the array of tags sorted
      getSortQuery({}).then(res= >{
        if (res.code == '000000') {
          this.tableDataList = res.data
          this.totalPage = res.data.pages
          this.totalRows = res.data.total
          // Process sequence number
          let Count = 0
          this.tableDataList.map(item= >{
            Count++
            item.num = Count
          }) 
        }
      }).finally(res= >{
        this.listLoading = false
      })
      this.listSortFlag = true
      this.rowDrop(true)},// Save the sort
    saveSort(){
      this.listLoading = true
      this.listSortFlag = false
      // Process sequence number
      let Count = 0
      let articleIdList = []
      this.tableDataList.map(item= >{
        Count++
        item.num = Count
        articleIdList.push(item.articleId)
      })
      this.rowDrop(false)
      let params = {
        articleIdList: articleIdList
      }
      getSortSubmit(params).then(res= > {
        this.init(this.filterData)
      })
    },
    
    // Unsort
    cencleSort(){
      this.listSortFlag = false
      this.tableDataList = this.tableDataListOld
      this.rowDrop(false)},Copy the code