vue.draggable多列数组拖拽

如果您想在多列中使用`vue.draggable`进行拖放，您可以将每列数据存储在一个数组中，并在每个数组上使用`v-for`指令来渲染列。

以下是一个示例代码：

<template>
  <div class="columns">
    <div class="column" v-for="(column, index) in columns" :key="index">
      <h3>{{ column.name }}</h3>
      <draggable :list="column.items" group="columns" @change="onChange">
        <div v-for="(item, itemIndex) in column.items" :key="itemIndex">
          {{ item }}
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  data() {
    return {
      columns: [
        {
          name: 'Column 1',
          items: ['Item 1', 'Item 2', 'Item 3']
        },
        {
          name: 'Column 2',
          items: ['Item 4', 'Item 5', 'Item 6']
        },
        {
          name: 'Column 3',
          items: ['Item 7', 'Item 8', 'Item 9']
        }
      ]
    };
  },
  components: {
    draggable
  },
  methods: {
    onChange(evt) {
      // handle change event
    }
  }
};
</script>

在这个例子中，我们有一个包含多个列的`columns`数组。在每个列上，我们使用`v-for`指令来渲染列，并在每个列中使用`draggable`组件来实现拖放功能。我们使用`list`属性将每个列的数据数组传递给`draggable`组件，并使用`@change`事件处理程序来处理拖放项目时的更改事件。

请注意，我们使用`group`属性来将每个列中的项目分组，以便在跨列拖放时可以正确处理项目。