html table nei边框线,关于前端:原生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…

末了

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