Element+sorttable实现表格拖拽排序

关注

原创 2022-04-18 15:11:21 1.8k 阅读 AI 写同款· GEO 优化 ›

踩坑日记 - Sortable 拖动树表格排序以 Element 树表格为例，实现了树表格的同级之间排序（跨级也有代码，但还有问题）踩坑点： onMove回调中 oldIndex 会随时变化，若想拿到最开始拖动的Row，需要使用onChoose 。在onChoose需将 oldIndex 或者 oldRow 存储一下，供后续onMove和onEnd使用。 onMove 中可以使用return false 阻止拖动因为是树形结构，所以回调中返回的 Index 并不准确，所以要预先在onChoose 时将树数据扁平化，才能根据返回的Index获. 阅读详情

Sortable.js是一款优秀的js拖拽库
官方Demo：http://rubaxa.github.io/Sortable/
sortable.js中文文档https://www.itxst.com/sortablejs/neuinffi.html
安装步骤：

npm install sortablejs --save

在.vue中的需要用到sorttable的vue文件中引入，也可以在main.js中引入注册到Vue的根实例中

import Sortable from 'sortablejs'

<template>
  <div style="width:800px">  
    <el-table :data="tableData"  row-key="id" border align="left">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>   
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {  
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎AAA',
          address: '沈阳市普陀区金沙江路2000-1518弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎BBB',
          address: '北京市普陀区金沙江路2020-1618弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎CCC',
          address: '成都市普陀区金沙江路2040-1718弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎DDD',
          address: '天津市普陀区金沙江路2030-1818弄'
        }
      ]
    }
  },
  mounted() {
    this.rowDrop() 
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        animation: 150,
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          const aa=  _this.tableData.splice(newIndex, 0, currRow)
          console.log(aa)
        }
      })
    },
    //列拖拽   dropCol: [ { label:'日期', prop: 'date' }, { label: '姓名', prop: 'name' }, { label: '地址', prop: 'address'} ],
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  }
}
</script>
<style scoped>
</style>

效果图
在这里插入图片描述
**

注意

**
使用sortablejs时,在开发过程中出现了Sortable: el must be an HTMLElement, not [object Null]的报错,记录一下我的解决方法:
如果table的值是在父组件传过来的，由于生命周期的原因在给对应table绑定方法时无法使用querySelector找到对应的table位置所以才会报这个错，所以在执行方法时候加上一个setTimeout就会解决