element中使用el-table可任意拖拽单元格到指定位置

最近在写一个排课系统，有些前台交互，还是挺有意思的

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方法

  drag(items,id,Index) {
                this.startWeek=items//startWeek是我用来存储被拖拽元素内容的一个变量
                this.startIndex=Index//用来记录被拖拽元素的行索引
            },

　　再来说拖拽结束的逻辑

 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{
                // 移到有课的位置
              }
            },

　　根据以上内容，即可完成对单元格内容的拖拽