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

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

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

 

原文地址:http://www.cnblogs.com/bingchenzhilu/p/16827461.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性