最近在写一个排课系统，有些前台交互，还是挺有意思的
el-table中有拖拽整行的方法，但是拖拽单元格怎么实现呢
我这边是这样想的，拖拽获得行索引，通过放下时的位置，可以得到列索引，就可以确定当前移入的位置，进行对列表数据的修改
由于项目需要，我的表头是自己生成的
格式大致如下：
weekArr=[
{
date: "2022-10-24",
weeks: "星期一"
},
{
date: "2022-10-25",
weeks: "星期二"
},
{
date: "2022-10-26",
weeks: "星期三"
},
{
date: "2022-10-27",
weeks: "星期四"
},
{
date: "2022-10-28",
weeks: "星期五"
},
{
date: "2022-10-29",
weeks: "星期六"
},
{
date: "2022-10-230,
weeks: "星期天"
},
]
我的数据类型的结构大致如下
assistlist: {
lists: [{
courseName:'xx课',
area_name:'总校',
courses:[{
date:'2022-10-24',
morning:'上',
morningTeacher:'张三',
afternoon:'下',
afternoonTeacher:'李四',
night:'晚',
all:'全',
class:'课程',
nightTeacher:'李思思',
remarks:'备注：该课程与第二期同教师该课程与第二期同教师'
},{
date:'2022-10-29',
morning:'上',
morningTeacher:'张三',
afternoon:'下',
afternoonTeacher:'李四',
night:'晚',
nightTeacher:'李思思',
remarks:'备注：该课程与第二期同教师该课程与第二期同教师'
}]
}],
},
所以我的表头除了第一列，其余都是动态的，结构如下
<el-table v-loading="loading" :data="assistlist.lists" @cell-click="goclick" @cell-dblclick='handleMouseEnter' row-style="{height: '0'}" :cell-style="myclass" :cell-class-name="cellClassName" >
<el-table-column label="课程名称/日期" align='center'>
<template slot-scope="scope">
<p>{{scope.row.courseName}}</p>
<p>{{scope.row.area_name}}</p>
</template>
</el-table-column>
<el-table-column :key="ii" :prop="item.value" :label="item.date+'/'+item.weeks" align='center' v-for='(item,ii) in weekARR' >
<template slot-scope="scope">
<div class="courses">
<div v-for='(items,index) in scope.row.courses' :key="index" class="courseDetail" draggable @drop="drop($event, items,'courses',scope.row.id,scope.$index,item)" @dragover="allowDrop">
<div v-if="items.date==item.date" draggable @dragstart="drag(items,scope.row.id,scope.$index,item.date)" @dragEnd="dragEnd(items)">
<p draggable v-show="items.morning">
<span class="tags">{{items.morning}} </span>
<span>{{items.class}}-{{items.morningTeacher?items.morningTeacher:'暂未安排老师'}}</span>
</p>
<p v-show="items.afternoon">
<span class="tags">{{items.afternoon}}</span>
<span>{{items.class}}-{{items.morningTeacher?items.morningTeacher:'暂未安排老师'}}</span>
</p>
<p v-show="items.night">
<span class="tags">{{items.night}}</span>
<span>{{items.class}}-{{items.morningTeacher?items.morningTeacher:'暂未安排老师'}}</span>
</p>
<p v-show="items.all" >
<span class="tags">{{items.all}}</span>
<span>{{items.class}}-{{items.morningTeacher?items.morningTeacher:'暂未安排老师'}}</span>
</p>
<p class="remarks">{{items.remarks?items.remarks:''}}</p>
</div>
</div>
<div draggable @drop="drop($event, i,'empty',scope.row.id,scope.$index,item.date)" @dragover="allowDrop" class="aaa" v-for='(it,i) in 7' :key='i' v-show='i==ii'
style='width:100%;height:100%; position: absolute;' ><div class="actions" v-show="checkArr.length!=0&&scope.$index==checkArr[checkArr.length-1].row&&item.date==weekARR[checkArr[checkArr.length-1].column-1].date">
<el-button type="text">站位</el-button>
<el-button type="text">排课</el-button>
<el-button type="text">备注</el-button>
</div>
</div>
</div>
</template>
</el-table-column>
<template slot="empty">
<img class="emptyshare" src="@/assets/img/blankDrawing.png" alt="">
<p class="textshare">没有找到相关信息~</p>
</template>
</el-table>
要想拖拽，首先是要将一个块元素拖拽到另一个块元素中，要想使元素能够被拖拽，需要加上draggable 属性
再说关于拖拽的方法，很久没用了，还是查了一些资料得以实现，
只说其中的dragstart，dragEnd是作用于被拖拽元素，drop作用于目标元素
先来说drag方法
startWeek是我用来存储被拖拽元素内容的一个变量
用来记录被拖拽元素的行索引
drag(items,id,Index) {
this.startWeek=items
this.startIndex=Index
},
再来说拖拽结束的逻辑
items：为空是横坐标的位置，有课程时是课程信息
index：这里的纵坐标是指第几列
this.startIndex：被拖拽课程的横坐标，及第几行的索引
type：typr的值为empty的时候拖拽到空白位置；否则是拖拽到有课的区域
drop(e,items,type,id,index,date) {
console.log(items);
console.log(index);
console.log(this.startIndex);
if(type=='empty'){
if(this.startIndex==index){
// 同一行转移
this.assistlist.lists[index].courses.forEach(val=>{
if(val.date==this.startWeek.date){
val.date=this.weekARR[items].date
}
})
}else{
// 不同行转移
this.assistlist.lists[this.startIndex].courses.forEach((val,ii)=>{
if(val.date==this.startWeek.date){/
this.assistlist.lists[this.startIndex].courses.splice(ii,1)
}
})
let obj=this.startWeek
obj.date=this.weekARR[items].date
this.assistlist.lists[index].courses.push(obj)/
}
}else{
}
},
根据以上内容，即可完成对单元格内容的拖拽
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
