问题:将表格输入的行和列内容复制如下图所示
粘贴到element table 中(前提粘贴dom应该是可输入的才可粘贴)
思路:1.先监听粘贴事件
2.转化粘贴的内容
3.最后将格式化的内容填到table中
4.如果一个页面过多table,有几个不想要复制功能可以设置如下所示:
5.遇到select下拉框是字典这种,就会跳过
6.查看当前列是否是默认值(不要excel复制数据) 当前元素设置data-default
代码如下:
ObjectUtils.hasValue(val){} 这个方法是判断是否有值的,根据自己项目封装方法进行调整
document.addEventListener("paste", e => {
//是取得当前dom的table的列和数据,td,tr的索引
let tableNode = '';
let trIndex = '';
let colIndex ='';
let isTableParse = false;
let tableParentObj = e.target.parentNode;
let domParentObj = e.target.parentNode;
let selectColumn = [];//取table列
let tableDisabled = false;
for(var i=0;i<100;i++){
//禁用select
if(ObjectUtils.hasValue(domParentObj)){
if(ObjectUtils.hasValue(domParentObj.parentNode)){
if(ObjectUtils.hasValue(domParentObj.parentNode.__vue__)){
if(ObjectUtils.hasValue(domParentObj.parentNode.__vue__.$listeners["select"])){
e.preventDefault(); //阻止默认粘贴事件
break;
}
}
}
}
if(domParentObj.className !== '' && domParentObj.className !== undefined){
if(domParentObj.className.includes('el-table el-table--fit el-table--striped')){
//属性是disable:ture的时候禁用复制表格功能
if(domPareinput 设置data-disabled="true"
if(parseInt(domParentObj.attributes["data-disabled"].value)){
tableDisabled = true;
break;
}
}
// //属性是default:ture的时候禁用复制表格功能
// else if(domParentObj.attributes["data-default"] != undefined){
// if(parseInt(domParentObj.attributes["data-default"].value)){
// tableDisabled = true;
// break;
// }
// }
else{
//正常粘贴
tableNode = domParentObj.__vue__;
isTableParse = true;
break;
}
}
}
domParentObj = domParentObj.parentNode
}
if(tableDisabled){
return;
}
if(isTableParse){
e.preventDefault(); //阻止默认粘贴事件
e.stopPropagation(); //阻止事件冒泡
for(let i=0;i<100;i++){
if(tableParentObj.className.includes('el-table el-table--fit el-table--striped')){
tableNode = tableParentObj.__vue__;
break;
}
if(tableParentObj.tagName === 'TR'){
trIndex = tableParentObj.rowIndex;
tableParentObj = tableParentObj.parentNode
}
if(tableParentObj.tagName === 'TD'){
colIndex = tableParentObj.cellIndex;
tableParentObj = tableParentObj.parentNode
}else{
tableParentObj = tableParentObj.parentNode
}
}
selectColumn = tableParentObj.__vue__.$el.childNodes[2].childNodes[0].childNodes[1].childNodes[0].childNodes;
let selectIndex = [];//找到当前select所在列
for(let i in selectColumn){
if(ObjectUtils.hasValue(selectColumn[i].__vue__)){
if(ObjectUtils.hasValue(selectColumn[i].__vue__.$listeners['select'])){
selectIndex.push(i);
}
}
if(ObjectUtils.hasValue(selectColumn[i].childNodes)){
loop(selectColumn[i].childNodes,i)
}
}
function loop(data,index){
for(let i in data){
if(ObjectUtils.hasValue(data[i].__vue__)){
if(ObjectUtils.hasValue(data[i].__vue__.$listeners['select'])){
selectIndex.push(index);
}
}
if(ObjectUtils.hasValue(data[i].childNodes)){
loop(data[i].childNodes,index)
}
}
}
let defaultIndex = [];//找到禁用并付默认值所在列
for(let i in selectColumn){
if(ObjectUtils.hasValue(selectColumn[i].attributes)){
if(selectColumn[i].attributes["data-default"]){
defaultIndex.push(i);
}
}
if(ObjectUtils.hasValue(selectColumn[i].childNodes)){
defaultloop(selectColumn[i].childNodes,i)
}
}
function defaultloop(data,index){
for(let i in data){
if(ObjectUtils.hasValue(data[i].attributes)){
if(data[i].attributes["data-default"]){
defaultIndex.push(index);
}
}
if(ObjectUtils.hasValue(data[i].childNodes)){
defaultloop(data[i].childNodes,index)
}
}
}
let tableColumns = tableNode.columns;
let tableData = tableNode.data;
let columnName = [];
if (ObjectUtils.hasValue(tableColumns)) {
tableColumns.map((item,index) => {//查看当前列是否是select
if(ObjectUtils.hasValue(selectIndex)){
selectIndex.map(selectIndexitem=>{
if(Number(selectIndexitem) === index){
item.checks=true
columnName.push({property:item.property,check:true,default:''})
}
})
}
if(ObjectUtils.hasValue(defaultIndex)){//查看当前列是否是默认值(不要excel复制数据)
defaultIndex.map(defaultIndexitem=>{
if(Number(defaultIndexitem) === index){
item.checks=true
columnName.push({property:item.property,default:'/',check:false})
}
})
}
if(!item.checks){
columnName.push({property:item.property,check:false,default:''})
}
});
}
//----获取当前聚焦数据
let pasteData = (e.clipboardData || window.clipboardData).getData("text"); //以text方式接收粘贴内容
//----将excel复制内容拆分成二维数组,第一维度为行数,第二维度为具体每行的数据
let arr = pasteData.split("\r\n");
if(!ObjectUtils.hasValue(arr[arr.length-1])){
arr.splice(arr.length-1,1)
}
let list = arr //拿到数据源
.map(item => {
return item.split("\t");
})
.filter(item => item.length);
let afterColumnName = [];
if (ObjectUtils.hasValue(columnName)) {
columnName.map((item, index) => {
if (index >= colIndex) {
if(afterColumnName.length>=list[0].length){
return ;
}
afterColumnName.push(item);
}
})
}
let num = 0;
if (ObjectUtils.hasValue(tableData)) {
tableData.map((item, index) => {
if (index >= trIndex) {
if(num>= list.length){
return;
}
if (ObjectUtils.hasValue(afterColumnName)) {
afterColumnName.map((col, colindex) => {
if(ObjectUtils.hasValue(col)){
if(!col.check){//是否是select,是就不赋值跳过
if(col.default!=''){//是否有默认值有就用
tableData[index][col.property]=col.default
}else{
tableData[index][col.property] = list[num][colindex]
}
}
}
})
num++;
}
}
})
}
}
});