html table 批量 修改,原生js实现框选表格内容并批量更改（vue）

原生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