ElementUI 表格;elementui 表格拖动排序

在使用ElementUI的表格时，实现拖动排序是一个常见的需求。介绍几种实现ElementUI表格拖动排序的方法。

解决方案简述

为了实现表格行的拖拽排序，我们可以借助第三方库 Sortable.js 来增强ElementUI表格的功能。通过监听拖拽事件并更新数据源，可以轻松实现可视化的行顺序调整。我们还可以直接利用ElementUI提供的tree属性配合自定义指令来实现更简洁的方案。

方法一：使用 Sortable.js 实现

这是最常用的解决方案。需要安装sortablejs:

bash npm install sortablejs --save

然后在组件中引入并初始化：

vue

  
    
    <!-- 其他列配置 -->
  
</p>


import Sortable from 'sortablejs'

export default {
  data() {
    return {
      tableData: [
        { name: 'Item1' },
        { name: 'Item2' },
        // ...
      ]
    }
  },
  mounted() {
    this.setSort()
  },
  methods: {
    setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll(
        '.el-table__body-wrapper tbody')[0]
      this.sortable = Sortable.create(el, {
        onEnd: evt => {
          const targetRow = this.tableData.splice(evt.oldIndex, 1)[0]
          this.tableData.splice(evt.newIndex, 0, targetRow)
        }
      })
    }
  }
}


<p>

这段代码会在表格加载完成后自动启用拖拽功能，并在拖拽结束时同步更新数据源。

方法二：使用自定义指令

如果不想依赖额外库，也可以通过Vue的自定义指令来实现简单的拖拽效果：

javascript
// 定义全局指令
Vue.directive('draggable', {
  bind(el, binding) {
    let dragStartIndex = null
    let dragEndIndex = null</p>

<pre><code>el.addEventListener('dragstart', (event) => {
  dragStartIndex = Array.from(event.target.parentNode.children).indexOf(event.target)
  event.dataTransfer.effectAllowed = "move"
})

el.addEventListener('dragover', (event) => {
  event.preventDefault()
  dragEndIndex = Array.from(event.target.parentNode.children).indexOf(event.target)
})

el.addEventListener('drop', (event) => {
  if (dragEndIndex !== null && dragStartIndex !== dragEndIndex) {
    const movedItem = binding.value.splice(dragStartIndex, 1)[0]
    binding.value.splice(dragEndIndex, 0, movedItem)
  }
})

}
})

然后在模板中使用：

html <el-table :data="tableData" v-draggable:[tableData]>  </el-table>

这种方法虽然功能简单，但对于一些基本场景已经足够使用。

以上两种方法都可以满足ElementUI表格的拖动排序需求，具体选择取决于项目实际情况和个人偏好。种方法功能更强大，但需要引入额外依赖；第二种方法更加轻量级，但功能相对简单。