Excel输入行和列数据粘贴到element table中(不用设置table属性,也可一个页面多个table通用)

问题:将表格输入的行和列内容复制如下图所示

 粘贴到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++;
                            }
                           
                        }
                    })
                }
            }
          
        });

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值