vue2 elementUI vuedraggable实现表格栏位设置可拖拽

在Vue 2中使用elementUI和vuedraggable实现表格列的拖拽，你需要先安装vuedraggable：

npm install vuedraggable

下面是一个简单的例子，展示如何使用vuedraggable实现列的拖拽功能：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label">
    </el-table-column>
  </el-table>
  <draggable v-model="columns" @end="onDragEnd">
    <div v-for="column in columns" :key="column.prop">{{ column.label }}</div>
  </draggable>
</template>
 
<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable
  },
  data() {
    return {
      tableData: [
        // ... 填充你的表格数据 ...
      ],
      columns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' }
        // ... 其他列 ...
      ]
    };
  },
  methods: {
    onDragEnd(event) {
      // 拖拽结束后的处理逻辑，例如更新列的顺序
    }
  }
};
</script>

在这个例子中，draggable组件用于创建可拖拽的列标题列表，columns数组包含了表格的列信息。v-model用于绑定列信息，实现列的拖拽排序。拖拽结束后会调用onDragEnd方法，你可以在这个方法中实现保存新的列顺序到服务器或本地存储的逻辑。