elementui sortable

ElementUI 的 Sortable 组件是一个基于鼠标拖拽实现的列表排序组件。它可以用于对列表中的元素进行排序、拖拽和交换位置。

使用 Sortable 组件，你需要先引入 ElementUI 库，并按照官方文档中的指导来安装和使用。

下面是一个简单的示例代码，演示了如何使用 ElementUI 的 Sortable 组件：

<template>
  <div class="sortable-demo">
    <el-sortable v-model="list" @sort-change="handleSortChange">
      <div v-for="item in list" :key="item.id" class="sortable-item">
        {{ item.name }}
      </div>
    </el-sortable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
      ],
    };
  },
  methods: {
    handleSortChange(newList) {
      this.list = newList;
      // 在这里处理排序改变后的逻辑
    },
  },
};
</script>

<style scoped>
.sortable-demo {
  display: flex;
}

.sortable-item {
  width: 100px;
  height: 30px;
  background-color: #f0f0f0;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

以上代码中，我们首先在 `data` 中定义了一个 `list` 数组，每个元素包含一个 `id` 和 `name` 属性。然后，在模板中使用 `v-for` 来渲染列表，并通过 `v-model` 绑定列表数据到 Sortable 组件上。

在 Sortable 组件的 `@sort-change` 事件中，我们可以通过回调函数 `handleSortChange` 来处理排序改变之后的逻辑。在这个示例中，我们简单地将新的排序结果更新到 `list` 数据中。

你可以根据实际需求自定义样式和处理逻辑来实现更复杂的功能。希望能对你有所帮助！如有更多问题，请继续提问。