原生js实现表格内容框选和批量变化(vue)修改框架批量更改所选内容。源码链接在文末demo下，供在线调试：https://codesandbox.io/s/tabl...通过监听鼠标事件绘制跑马灯来说明主要思想。获取框选的dom，计算是否在框选区域内，进行批量更改。主要方法是getClientRects。业务代码：1.初始化表数据结构因为表是周/时，相对结构会有点复杂，问题不大，giao。setTableConfig(){让timeThArr=Array.from(newArray(24).keys());让timeTdArr=Array.from(newArray(48).keys());timeTdArr=timeTdArr.map((item)=>{letobj={id:item,};returnobj;});this.timeThArr=timeThArr;this.timeTdArr=timeTdArr;让tableList=this.tableData;tableList.map((item,index)=>{this.timeThArr.map((temp,key)=>{item.push({key:key+index*24,})})})this.tableData=tableList;},2.点击单格选择除了方框选择可以点击选择handleClickTimeData(obj,index){lettableList=_.clone(this.tableData);_.map(tableList[index],(item)=>{if(item.key==obj.key){item.checked=!item.checked;}});this.tableData=tableList;},3.重置并取消所有框选reset(){lettableList=_.clone(this.tableData);_.map(tableList,(item)=>{_.map(item,temp=>{temp.checked=false;})});你s.tableData=tableList;},框选代码1,表格绑定mousedown,mousemove,mouseupeventhandleMouseDown(e){this.is_show_mask=true;this.start_x=e.clientX;this.start_y=e.clientY;这个.end_x=e.clientX;this.end_y=e.clientY;document.body.addEventListener("mousemove",this.handleMouseMove);document.body.addEventListener("mouseup",this.handleMouseUp);},handleMouseMove(e){this.end_x=e.clientX;this.end_y=e.clientY;},handleMouseUp(){document.body.removeEventListener("mousemove",this.handleMouseMove);document.body.removeEventListener("mouseup",这个.handleMouseUp);this.is_show_mask=false;这个.handleDomSelect();this.resetXY();},2.计算dom是否包含在frame区域collide(rect1,rect2){constmaxX=Math.max(rect1.x+rect1.width,rect2.x+rect2.width);constmaxY=Math.max(rect1.y+rect1.height,rect2.y+rect2.height);constminX=Math.min(rect1.x,rect2.x);constminY=Math.min(rect1.y,rect2.y);如果(maxX-minX<=rect1.width+rect2.width&&maxY-minY<=rect1.height+rect2.height){returntrue;}else{返回错误；}},3.鼠标松开后执行一系列操作（1）首先获取frame选中的dom，主要方法是getClientRects（2）然后计算获取的元素是否在frame选中的范围内（3）在handleDomSelect()范围内对dom进行后续操作{constdom_mask=window.document.querySelector(".mask");constrect_select=dom_mask.getClientRects()[0];让selectKeys=[];document.querySelectorAll(".week-data-td").forEach((node,index)=>{constrects=node.getClientRects()[0];if(this.collide(rects,rect_select)===true){selectKeys.push(index);}});如果(selectKeys.length<2)返回；让tableList=_.clone(this.tableData);tableList=_.map(tableList,(item,key)=>{return_.map(item,(temp)=>{if(selectKeys.indexOf(temp.key)>-1){temp.checked=true;}返回温度;});});这。表数据=tableList;}，选择这部分代码，具体参考大佬代码http://www.360doc.com/content...源码https://github.com/ttypZhoupe...最后，如果本文对高手有帮助，请不要吝啬点赞，点三下就更好了，感谢阅读。
