vue3 + element-plus + sortable.js实现表格行的拖拽

1. 安装sortable.js
使用npm install sortablejs --save 或者 yarn add sortablejs
2.引入sortable.js
import Sortable from 'sortablejs

注：引入报错在shims-vue.d.ts添加

declare module 'sortablejs' // declare module 'xxx'路径或者模块名

3.具体API可以看文档
 

https://www.itxst.com/sortablejs

4.代码

html部分

注：注意这里的row-key必须是唯一值，否则可能造成排序异常

js部分：

1、拖拽排序

const rowDrop = () => {
  //行拖拽

  // 此时找到的元素是要拖拽元素的父容器
  const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody')
  // const _this = this;

  sortdd = Sortable.create(tbody, {
    //  指定父元素下可被拖拽的子元素
    draggable: '.draggable .el-table__row',

    sort: true,

    disabled: false,
    helper: 'clone',

    onClone: evt => {},

    onUpdate(params) {
      // console.log(params,"update")
    },
    onAddOriginal(params) {
      // alert(params)
    },

    onEnd(params) {
      var itemEl = params.item // dragged HTMLElement
      const { newIndex, oldIndex } = params

      if (newIndex == oldIndex) {
        return
      }
      list1end.push(newIndex)
      list1end.forEach((item, index) => {
        if (item == oldIndex) {
          list1end.splice(index, 1)
        }
      })

      let mix = 0
      let max = 0
      let x = 0
      if (oldIndex > newIndex) {
        mix = newIndex + 1
        max = oldIndex + 1
        x = 1
      } else {
        mix = oldIndex + 1
        max = newIndex + 1
        x = -1
      }
      totalData.form.ItemTableConfig.TableConfig.forEach(item => {
        if (item.row == oldIndex + 1) {
          item.row = newIndex + 1
          isClick.value = item.row
        } else if (item.row <= max && item.row >= mix) {
          item.row = item.row + x
          isClick.value = item.row
        }
      })
      console.log(JSON.stringify(totalData.form.ItemTableConfig.TableConfig), 'row标记后')
      const arr = JSON.parse(JSON.stringify(totalData.form.ItemTableConfig.TableConfig))

      arr.sort((a, b) => {
        console.log(a.row - b.row)
        return a.row - b.row
      })
      setTimeout(() => {
        sortdd.sort(rowAndSort)
      }, 122)


      console.log(totalData.form.ItemTableConfig.TableConfig, '推拽结束后')
    },
  })
}

2、表格中间添加行、中间删减行，后面添加行进行的数据增加以及排序操作 

注意：rowAndSort 为观察的排序规律  这里只能添相应长度的数据   无法添加更多

const rowAndSort = ['2mv', '2mw', '2mx', '2my', '2mz', '2n0', '2n1', '2n2', '2n3', '2o7', '2o8', '2o9', '2oa', '2ob', '2oc', '2od', '2oe', '2of', '2og']
const rowAndSort1 = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17']
// const rowAndSort1=['146l', '2f28', '2kd2', '2dx9']

const handleAddRow = (row, index) => {
  //中间添加
  let obj = {
    row: row,
    Field: '',
    FieldDisplayName: '',
    Expression: '',
    Format: '',
    Fixed: false,
  }

  totalData.form.ItemTableConfig.TableConfig.forEach(item => {
    if (item.row >= row) {
      //   item.row=(+item.row)+1
      item.row = item.row + 1
    }
  })

  totalData.form.ItemTableConfig.TableConfig.splice(row - 1, 0, obj)


  setTimeout(() => {
    console.log(sortdd.toArray(), '中')
    sortdd.sort(rowAndSort)
    console.log(totalData.form.ItemTableConfig.TableConfig, '中间添加后')
  
  }, 122)
  
}
const handleReduceRow = row => {
  //删除
  totalData.form.ItemTableConfig.TableConfig.forEach((item, index) => {
    if (item.row == row) {
      totalData.form.ItemTableConfig.TableConfig.splice(index, 1)
      totalData.form.ItemTableConfig.TableConfig
    }
  })
  totalData.form.ItemTableConfig.TableConfig.forEach((item, index) => {
    if (item.row > row) {
      item.row = +item.row - 1
    }
  })
  console.log(totalData.form.ItemTableConfig.TableConfig, '删除后')
}
const onAddItem = () => {
  //后面添加
  let obj = {
    row: totalData.form.ItemTableConfig.TableConfig.length + 1,
    Field: '',
    FieldDisplayName: '',
    Expression: '',
    Format: '',
    Fixed: false,
  }

  totalData.form.ItemTableConfig.TableConfig.push(obj)
  setTimeout(() => {
    console.log(sortdd.toArray(), '--------------')
    sortdd.sort(rowAndSort)
  }, 122)
  console.log(totalData.form.ItemTableConfig.TableConfig, '后面添加')
}

效果图：