<template>
<el-select ref="elDragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners">
<slot/>
</el-select>
</template>
<script>
import Sortable from 'sortablejs'
export default {
name: 'elDragSelect',
props: {
value: {
type: Array,
required: true
}
},
computed: {
selectVal: {
get() {
return [...this.value]
},
set(val) {
this.$emit('input', [...val])
}
}
},
mounted() {
this.setSort()
},
methods: {
setSort() {
const el = this.$refs.elDragSelect.$el.querySelectorAll('.el-select__tags > span')[0]
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost',
setData: function (dataTransfer) {
dataTransfer.setData('Text', '')
},
onEnd: evt => {
const targetRow = this.value.splice(evt.oldIndex, 1)[0]
this.value.splice(evt.newIndex, 0, targetRow)
}
})
}
}
}
</script>
<style scoped>
.drag-select ::v-deep .sortable-ghost {
opacity: .8;
color: #fff !important;
background: #42b983 !important;
}
.drag-select ::v-deep .el-tag {
cursor: pointer;
}
</style>
在main.js中配置成全局组件,方便使用。
import ElDragSelect from '@/components/Select/elDragSelect' // - 可拖拽多选框
Vue.component('ElDragSelect', ElDragSelect);
使用方法:
<el-drag-select prop="aaa" style="width: 95%" v-model="ruleForm.aaa" @change="changeCtrlTxt"
filterable multiple placeholder="请选择字段" clearable no-data-text="无字段">
<el-option
v-for="(item, index) of this.listOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-drag-select>
原创作者地址: https://blog.51cto.com/u_15437432/4800592