使用sortablejs在element表格拖拽

613 阅读1分钟
import Sortable from 'sortablejs'

   // 行拖拽
    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();
      }
    },
    
        // 排序
    handleSort(){
      this.listLoading = true
      this.tableDataListOld = JSON.parse(JSON.stringify(this.tableDataList)) 
      // 查询标记排序的数组
      getSortQuery({}).then(res=>{
        if (res.code == '000000') {
          this.tableDataList = res.data
          this.totalPage = res.data.pages
          this.totalRows = res.data.total
          // 处理序号
          let Count = 0
          this.tableDataList.map(item=>{
            Count++
            item.num = Count
          }) 
        }
      }).finally(res=>{
        this.listLoading = false
      })
      this.listSortFlag = true
      this.rowDrop(true)
    },
    
    // 保存排序
    saveSort(){
      this.listLoading = true
      this.listSortFlag = false
      // 处理序号
      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)
      })
    },
    
    // 取消排序
    cencleSort(){
      this.listSortFlag = false
      this.tableDataList = this.tableDataListOld
      this.rowDrop(false)
    },