一、效果視頻
最近有個(gè)需求是實(shí)現(xiàn)在表格內(nèi)上下不同格子間標(biāo)簽的拖拽，然而element ui并沒有提供此類api，后面我導(dǎo)入vuedraggable包實(shí)現(xiàn)了此需求，效果見視頻。
demo視頻：
element ui表格內(nèi)標(biāo)簽拖拽demo
二、代碼實(shí)現(xiàn)
首先要去下載vuedraggable包
npm i vuedraggable
去package.json文件里看包是否下載成功
下載完成后新建頁面
頁面完整代碼如下：
ps：若要實(shí)現(xiàn)表格橫向的移動(dòng)，將代碼中的:group="jndex + 1"改為group="a"即可文章來源：http://www.zghlxwxcb.cn/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函數(shù)是拖拽點(diǎn)擊開始時(shí)所觸發(fā)，dragEnd函數(shù)是拖拽完后觸發(fā)文章來源地址http://www.zghlxwxcb.cn/news/detail-861624.html
到了這里，關(guān)于vue+element ui+vuedraggable實(shí)現(xiàn)表格內(nèi)不同格子間標(biāo)簽的拖拽的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
