原生js实现框选表格内容并批量更改(vue)
前言
平常开发中,有这样的需求,须要在表格中进行框选,并对框选中的内容进行批量更改。源码于文章结尾javascript
demo
下面连接供在线调试:html
讲解
主要思路经过监听鼠标事件,进行框选框绘制。获取框选 的dom,并计算其是否在框选区域,来进行批量更改。其中主要的方式 getClientRects。java
业务代码:
一、初始化表格数据结构node
由于表格为星期/时间,相对结构会有点子复杂,问题不大,giao。git
setTableConfig() {
let timeThArr = Array.from(new Array(24).keys());
let timeTdArr = Array.from(new Array(48).keys());
timeTdArr = timeTdArr.map((item) => {
let obj = {
id: item,
};
return obj;
});
this.timeThArr = timeThArr;
this.timeTdArr = timeTdArr;
let tableList = this.table