vue 3 + element UI 使用vuedraggable实现从左往右拖拽至表格，表格支持搜索输入
作者：互联网
使用vue版本：vue@3.2.37
使用vuedraggable版本：vuedraggable@4.1.0
引用了如下脚本：
<script src="~/lib/vue/vue.global.min.js"></script>
<link href="~/lib/element-plus/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/index.full.js"></script>
<script src="~/lib/element-plus/locale/en.js"></script>
<script src="~/lib/element-plus/locale/zh-cn.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/sortablejs/Sortable.min.js"></script>
<script src="~/lib/vuedraggable/dist/vuedraggable.umd.min.js"></script>
实现效果如下图：
代码实现：
<style>
.itxst {
margin: 10px;
text-align: left;
}
.col {
width: 40%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col2 {
width: 60%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col + .col {
margin-left: 10px;
}
.item {
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: #f1f1f1;
text-align: left;
}
.item + .item {
border-top: none;
margin-top: 6px;
}
.item:hover {
background-color: #fdfdfd;
cursor: move;
}
.item2 {
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: pink;
text-align: left;
}
.item2 + .item2 {
border-top: none;
margin-top: 6px;
}
.item2:hover {
outline: solid 1px #ddd;
cursor: move;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
<div id="app">
<!--使用draggable组件-->
<div class="itxst">
<div style="padding-left:6px">往右边拖动试试看</div>
<div class="col">
<draggable :list="arr1" ghost-class="ghost" :force-fallback="true" animation="300" :group="groupA" sort="false">
<template #item="{ element }">
<div class="item">
{{ element.value }}
</div>
</template>
</draggable>
</div>
<div class="col2">
<el-table :data="tableData"
current-row-key="id"
style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column label="姓名" width="180">
<template v-slot="scope">
<draggable :list="scope.row.name" ghost-class="ghost" :force-fallback="true" animation="300" group="itxst" @@add="addarr2(scope.row.id,scope.row.name)">
<template #item="{ element }">
<el-tag :key="element.id"
closable
:disable-transitions="false"
@@close="handleRemove(scope.row.name,element)">
{{element.value}}
</el-tag>
</template>
</draggable>
<el-autocomplete class="input-new-tag" ref="saveTagInput"
size="small" v-if="scope.row.inputVisible"
v-model="scope.row.inputValue"
:fetch-suggestions="querySearch"
clearable
@@trigger-on-focus="false"
@@select="handleSelect($event,scope.row.name,scope.row.id)"></el-autocomplete>
<el-button v-else class="button-new-tag" :key="scope.row.id" size="small" @@click="showInput(scope.row.id)">+ New Tag</el-button>
</template>
</el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</div>
</div>
<script type="text/javascript">
var Main = {
data() {
return {
arr1: [
{ id: 1, value: '王小虎' },
{ id: 2, value: '王二虎' },
{ id: 3, value: '张三' },
{ id: 4, value: '赵四' },
{ id: 5, value: '一甲' }
],
tableData: [
{
id: "1",
date: "2022-08-02",
name: [
{ id: 1, value: '王小虎' },
{ id: 2, value: '王二虎' },
],
address: "深圳市龙岗坂田街道21号",
inputValue: "",
inputVisible: false,
},
{
id: "2",
date: "2022-08-04",
name: [],
address: "深圳市龙岗坂田街道22号",
inputValue: "",
inputVisible: false,
},
{
id: "3",
date: "2022-08-01",
name: [],
address: "深圳市龙岗坂田街道21号",
inputValue: "",
inputVisible: false,
},
{
id: "4",
date: "2022-08-03",
name: [],
address: "深圳市龙岗坂田街道21号",
inputValue: "",
inputVisible: false,
}
],
moveId: -1,
groupA: {
name: 'itxst',
pull: 'clone',
put: false,
},
restaurants: [],
};
},
//注册draggable组件
components: {
'draggable': window.vuedraggable
},
mounted() {
this.restaurants = this.loadAll();
},
methods: {
loadAll() {
return this.arr1;
},
//左边往右边拖动时的事件
addarr2(_id, _data, e) {
const map = new Map()
const qc = _data.filter(item => !map.has(item.id) && map.set(item.id, 1))
for (var i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].id == _id) {
this.tableData[i].name = qc;
break;
}
}
},
handleRemove(datalist,tag) {
datalist.splice(datalist.indexOf(tag), 1);
},
showInput(_id) {
for (var i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].id == _id) {
this.tableData[i].inputVisible = true;
break;
}
}
},
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item, datalist, _id) {
if (item) {
datalist.push(item);
const map = new Map()
const qc = datalist.filter(item => !map.has(item.id) && map.set(item.id, 1))
for (var i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].id == _id) {
this.tableData[i].name = qc;
this.tableData[i].inputValue = "";
this.tableData[i].inputVisible = false;
break;
}
}
}
}
},
};
const app = Vue.createApp(Main);
app.use(ElementPlus)
const reportDataVM = app.mount("#app");
</script>
标签：vue,表格,value,id,item,10px,从左往右,margin,tableData 来源： https://www.cnblogs.com/bingshao/p/16554816.html