element ui 拖拽排序
时间: 2023-10-23 08:09:15 浏览: 85
您好!对于Element UI的拖拽排序,您可以使用Element UI的拖拽组件进行实现。下面是一个简单的示例:
首先,确保您已经引入了Element UI库和相关样式。
HTML结构:
```html
<el-row>
<el-col :span="12">
<div class="drag-container">
<el-card v-for="(item, index) in list" :key="item.id" class="drag-item" :header="item.name" :index="index">
{{ item.content }}
</el-card>
</div>
</el-col>
</el-row>
```
在Vue组件中,可以使用`<draggable>`组件来实现拖拽排序:
```javascript
<template>
<draggable v-model="list" :options="dragOptions">
<el-card v-for="(item, index) in list" :key="item.id" class="drag-item" :header="item.name">
{{ item.content }}
</el-card>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
data() {
return {
list: [
{ id: 1, name: 'Item 1', content: 'Content 1' },
{ id: 2, name: 'Item 2', content: 'Content 2' },
{ id: 3, name: 'Item 3', content: 'Content 3' },
// ...
],
dragOptions: {
animation: 150,
handle: '.drag-handle' // 如果需要指定拖拽手柄,可以设置该属性
}
}
}
}
</script>
```
在上述示例中,我们使用了`<draggable>`组件来包裹需要排序的元素,并通过`v-model`指令绑定了一个数组`list`。注意,这里使用了`vuedraggable`库来实现拖拽功能。
通过上述方法,您就可以实现Element UI的拖拽排序功能了。希望对您有所帮助!如有任何问题,请随时提问。