element table vuedraggable

Element Table 是 Element UI 的一个组件，它是一个表格插件，提供了一种简单的方式来展示数据列表并支持交互操作。Vuedraggable 是一个轻量级的 Vue.js 插件，用于实现元素的拖放功能，常用于列表、卡片等场景中。

当你将 Vuedraggable 应用到 Element Table 中，你可以赋予表格中的行或者列拖拽的能力。比如，你可以让用户通过拖动调整数据的顺序，或者创建可拖动的表头，以便用户自定义列的排列。这样增强了用户体验，并使得数据管理变得更加直观和动态。

例如，你可能会这么使用：

<template>
  <el-table :data="items" @drag-end="onDragEnd">
    <el-table-column type="index"></el-table-column>
    <draggable :list="headers" v-model="sortedHeaders" @change="headersChanged">
      <el-table-column v-for="(header, index) in sortedHeaders" :key="index" :prop="header" :label="header">
      </el-table-column>
    </draggable>
  </el-table>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      items: ...,
      headers: [...], // 表头数组
      sortedHeaders: [...], // 拖拽排序后的表头
    };
  },
  methods: {
    onDragEnd({ source, target, direction }) {
      // 阻止默认行为并处理拖动结束后的逻辑
    },
    headersChanged(newHeaders) {
      this.sortedHeaders = newHeaders;
    }
  }
};
</script>