一、效果视频
最近有个需求是实现在表格内上下不同格子间标签的拖拽，然而element ui并没有提供此类api，后面我导入vuedraggable包实现了此需求，效果见视频。
demo视频：
element ui表格内标签拖拽demo
二、代码实现
首先要去下载vuedraggable包
npm i vuedraggable
去package.json文件里看包是否下载成功
下载完成后新建页面
页面完整代码如下：
ps：若要实现表格横向的移动，将代码中的:group="jndex + 1"改为group="a"即可文章来源：https://www.toymoban.com/news/detail-861624.html
<template>
<div class="app-container">
<el-table
v-loading="loading"
:data="tableData"
:max-height="maxHeight"
class="small-table"
border
style="width: 100%"
>
<el-table-column align="center" prop="week_date" min-width="160">
</el-table-column>
<el-table-column
align="center"
prop="start_date"
label="日期"
min-width="160"
/>
<template v-for="(jtem, jndex) in list">
<el-table-column align="center" :label="jtem.name" min-width="160">
<template slot-scope="scope">
<template v-for="(item, index) in jtem.taskList">
<template v-if="scope.$index === index">
<draggable
:list="item.ground"
class="list-group"
animation="500"
handle=".el-tag"
:group="jndex + 1"
@start="dragStart($event, jndex)"
@end="dragEnd($event, jndex)"
>
<template v-if="item.ground.length > 0">
<div
class="list-group-item"
v-for="(item2, index2) in item.ground"
:key="item2.groundId"
>
<el-tag style="margin: 5px 0">{{ item2.name }}</el-tag>
</div>
</template>
</draggable>
</template>
</template>
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable
},
data() {
return {
loading: false,
maxHeight: window.innerHeight - 250,
tableData: [
{
start_date: "2019-12-23",
week_date: "星期一"
},
{
start_date: "2019-12-24",
week_date: "星期二"
},
{
start_date: "2019-12-25",
week_date: "星期三"
},
{
start_date: "2019-12-26",
week_date: "星期四"
},
{
start_date: "2019-12-27",
week_date: "星期五"
},
{
start_date: "2019-12-28",
week_date: "星期六"
},
{
start_date: "2019-12-29",
week_date: "星期日"
}
],
departmentList: [],
list: [
{
name: "小王",
taskList: [
{
ground: [
{
groundId: 1,
name: "John1",
no: "1"
},
{
groundId: 2,
name: "heo1",
no: "2"
},
{
groundId: 3,
name: "mary1",
no: "3"
}
]
},
{
ground: [
{
groundId: 11,
name: "John2",
no: "4"
},
{
groundId: 12,
name: "heo2",
no: "5"
}
]
},
{
ground: [
{
groundId: 21,
name: "John3",
no: "6"
}
]
},
{
ground: []
},
{
ground: []
},
{
ground: []
},
{
ground: []
}
]
},
{
name: "小lv",
taskList: [
{
ground: [
{
groundId: 150,
name: "John1",
no: "45"
},
{
groundId: 250,
name: "heo1",
no: "55"
},
{
groundId: 350,
name: "mary1",
no: "65"
}
]
},
{
ground: [
{
groundId: 1150,
name: "John2",
no: "75"
},
{
groundId: 1250,
name: "heo2",
no: "85"
}
]
},
{
ground: [
{
groundId: 2150,
name: "John3",
no: "95"
}
]
},
{
ground: []
},
{
ground: []
},
{
ground: []
},
{
ground: []
}
]
}
],
listNo: []
};
},
methods: {
dragStart(e, listIndex) {
this.listNo = [];
this.list[listIndex].taskList.forEach(item => {
let array = item.ground.map(item2 => {
return item2.no;
});
this.listNo = [...this.listNo, ...array];
});
console.log(this.listNo);
},
dragEnd(e, listIndex) {
this.list[listIndex].taskList.forEach(item => {
item.ground.forEach(item2 => {
item2.no = this.listNo.shift();
});
});
console.log(this.list[listIndex].taskList);
}
}
};
</script>
<style scoped>
.el-tag {
cursor: move;
}
</style>
其中dragStart函数是拖拽点击开始时所触发，dragEnd函数是拖拽完后触发文章来源地址https://www.toymoban.com/news/detail-861624.html
到了这里，关于vue+element ui+vuedraggable实现表格内不同格子间标签的拖拽的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
