最近在写一个排课系统,有些前台交互,还是挺有意思的
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. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性