关于前端:原生js实现框选表格内容并批量更改vue

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

前言

日常开发中，有这样的需要，须要在表格中进行框选，并对框选中的内容进行批量更改。源码于文章结尾

demo

上面链接供在线调试：

https://codesandbox.io/s/tabl…

解说

次要思路通过监听鼠标事件，进行框选框绘制。获取框选 的 dom，并计算其是否在框选区域，来进行批量更改。其中次要的形式 getClientRects。

业务代码：

1、初始化表格数据结构

因为表格为星期 / 工夫，绝对构造会有点子简单，问题不大，giao。

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.tableData;
    tableList.map((item, index) => {this.timeThArr.map((temp, key) => {
        item.push({key: key + index * 24,})
      })
    })
    this.tableData = tableList;
  },

2、点击单格选中

除了框选也能够单击选中

handleClickTimeData(obj, index) {let tableList = _.clone(this.tableData);
    _.map(tableList[index], (item) => {if (item.key == obj.key) {item.checked = !item.checked;}
    });
    this.tableData = tableList;
},   

3、重置

勾销所有框选

reset() {let tableList = _.clone(this.tableData);
    _.map(tableList, (item) => {
      _.map(item, temp => {temp.checked = false;})
    });
    this.tableData = tableList;
},

框选代码

1、表格绑定 mousedown、mousemove、mouseup 事件

handleMouseDown(e) {
    this.is_show_mask = true;
    this.start_x = e.clientX;
    this.start_y = e.clientY;
    this.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", this.handleMouseUp);
    this.is_show_mask = false;
    this.handleDomSelect();
    this.resetXY();},

2、计算 dom 是否在蕴含在框选区域外部

collide(rect1, rect2) {const maxX = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);
    const maxY = Math.max(rect1.y + rect1.height, rect2.y + rect2.height);
    const minX = Math.min(rect1.x, rect2.x);
    const minY = Math.min(rect1.y, rect2.y);
    if (
      maxX - minX <= rect1.width + rect2.width &&
      maxY - minY <= rect1.height + rect2.height
    ) {return true;} else {return false;}
},

3、鼠标松开后进行一系列操作

（1）首先获取框选的 dom，次要的办法为 getClientRects
（2）而后计算获取的元素是否在框选范畴内
（3）对范畴内的 dom 进行后续操作

handleDomSelect() {const dom_mask = window.document.querySelector(".mask");
    const rect_select = dom_mask.getClientRects()[0];
    
    let selectKeys = [];
    document.querySelectorAll(".week-data-td").forEach((node, index) => {const rects = node.getClientRects()[0];
      if (this.collide(rects, rect_select) === true) {selectKeys.push(index);
      }
    });
    if (selectKeys.length < 2) return;
    let tableList = _.clone(this.tableData);
    tableList = _.map(tableList, (item, key) => {return _.map(item, (temp) => {if (selectKeys.indexOf(temp.key) > -1) {temp.checked = true;}
        return temp;
      });
    });
    this.tableData = tableList;
},

框选这部分代码，具体参考大佬代码

http://www.360doc.com/content…

源码

https://github.com/ttypZhoupe…

末了

如果这篇文章对大佬有帮忙，请不要悭吝你的赞。来个一键三连就更好了，感激大佬参阅。