具有固定列的vue可拖动表

<template>
  <draggable v-model="columns" tag="table">
    <tr v-for="(column, index) in columns" :key="index">
      <td>{{ column.name }}</td>
    </tr>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      columns: [
        { name: 'Name' },
        { name: 'Age' },
        { name: 'Address' },
      ],
    };
  },
};
</script>

<template>
  <div>
    <draggable v-model="columns" @end="onDragEnd">
      <div v-for="(column, index) in columns" :key="index">
        {{ column.title }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      columns: [
        { title: 'Name', key: 'name' },
        { title: 'Age', key: 'age' },
        { title: 'Address', key: 'address' },
      ],
    };
  },
  methods: {
    onDragEnd() {
      // 处理拖动结束后的逻辑，如更新数据等
    },
  },
};
</script>

<style>
/* 添加一些样式以改善拖动效果 */
</style>