Vue进阶（幺零五）：elementUI 实现表格行列拖拽_vuedraggable+elementui table

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      v-for="item in dynamicColumns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label">
    </el-table-column>
  </el-table>
  <draggable v-model="dynamicColumns" @end="onDragEnd">
    <div v-for="item in dynamicColumns" :key="item.prop">{{ item.label }}</div>
  </draggable>
</template>
 
<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable
  },
  data() {
    return {
      tableData: [
        // ...
      ],
      dynamicColumns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        // ...
      ]
    }
  },
  methods: {
    onDragEnd(event) {
      // 拖拽结束后的处理逻辑
    }
  }
}
</script>

这个代码实例展示了如何在Vue中使用vuedraggable和element-ui的el-table组件实现表格列的拖拽功能。draggable组件是基于vuedraggable实现的，它允许用户拖拽其中的元素来重新排列。在拖拽结束后，可以通过onDragEnd方法进行相关的处理。