Vue3实现el-select多选已选项拖拽排序（ElementPlus）

最新推荐文章于 2026-05-11 21:21:06 发布

原创最新推荐文章于 2026-05-11 21:21:06 发布 · 398 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #npm #前端

1. 安装sortablejs插件

https://sortablejs.com

2. 创建vue组件

<template>
  <el-select v-model="model" ref="elDragSelect" class="drag-select" multiple>
    <slot></slot>
  </el-select>
</template>

<script setup>
import Sortable from 'sortablejs'
let sortable = null
const elDragSelect = ref()
const model = defineModel({
  type: Array,
  default: []
})

const setSort = (val) => {
  nextTick(() => {
    //找到要拖动的dom元素
    const el = elDragSelect.value.$el.querySelectorAll('.el-select__wrapper > .el-select__selection')[0]
    if (el) {
      //删除元素
      const inputWrapper = el.querySelector('.el-select__input-wrapper')
      if (inputWrapper) {
        inputWrapper.remove()
      }
    }
    sortable = Sortable.create(el, {
      animation: 150,
      ghostClass: 'sortable-ghost',
      // setData: function (dataTransfer) {
      //   // dataTransfer.setData('Text', '')
      // },
      onEnd: evt => {
        const { oldIndex, newIndex } = evt
        const movedItem = model.value.splice(oldIndex, 1)[0]
        model.value.splice(newIndex, 0, movedItem)
      }
    })
  })
}

onMounted(() => {
  setSort()
})
</script>

<style scoped>
.drag-select ::v-deep .sortable-ghost {
  opacity: .8;
  color: #fff !important;
  background: #409eff !important;
}

.drag-select ::v-deep .el-tag {
  cursor: pointer;
}
</style>

3. 页面使用

<template>
<el-drag-select v-model="value" placeholder="Select" multiple clearable style="width: 100%">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-drag-select>
</template>

<script lang="ts" setup>
import ElDragSelect from '@/components/组件name.vue'
import { ref } from 'vue'

const value = ref('')

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>