vuedraggable 能和el-table结合使用

当然,vuedraggable 确实可以与 el-table 组件结合使用。这样可以实现表格内行列的拖拽排序功能。以下是一个示例:

安装 vuedraggable 包:

npm install vuedraggable --save

在组件中导入并使用 vuedraggable:

<template>
  <el-table :data="tableData" row-key="id" v-drag-drop>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
import Vue from 'vue'
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 30, address: 'New York No. 1 Lake Park' },
        { id: 2, name: 'Jane', age: 26, address: 'London No. 2 Lake Park' },
        { id: 3, name: 'Michael', age: 32, address: 'Sydney No. 3 Lake Park' }
      ]
    }
  },
  directives: {
    'drag-drop': {
      inserted(el, binding, vnode) {
        const vm = vnode.context
        const table = vm.$el.querySelector('.el-table__body-wrapper > table')
        const tbody = table.querySelector('tbody')
        new draggable(tbody, {
          animation: 300,
          handle: '.el-table__row',
          onEnd: (evt) => {
            const oldIndex = evt.oldIndex
            const newIndex = evt.newIndex
            vm.tableData.splice(newIndex, 0, vm.tableData.splice(oldIndex, 1)[0])
          }
        })
      }
    }
  }
}
</script>

在这个例子中,我们使用了一个自定义指令 v-drag-drop 来实现表格行的拖拽排序功能。当用户拖动表格行时,会触发 onEnd 事件,我们在这个事件中更新 tableData 数据源,从而更新表格的显示。

需要注意的是,我们使用了 row-key 属性来唯一标识每一行数据,这是为了保证拖拽操作的正确性。

总之,通过结合使用 vuedraggable 和 el-table,我们可以实现表格的拖拽排序功能,为用户提供更好的交互体验。