元素表实现溢出隐藏单元格并添加复制按钮

#app{position:relative}.copyBtn{width:18px;高度：18px；z-指数：1111；位置：固定；顶部：100px；左：100px；背景：url(./assets/images/copy.png)不重复；背景尺寸：封面；游标：指针；&:hover{背景:url(./assets/images/hoverCopy.png);}}该功能可以实现只有一个公共复制按钮，可以在多个页面的表格中使用。使用Vuex和剪贴板。如果不想用vuex，就想办法把copybutton的位置的x,y坐标写成publicvariables1,Copybutton如果整个项目有一个public的入口文件，可以放在it，也可以直接放在app.vue中，copyX，copyY是当前复制按钮的位置#app{position:relative}.copyBtn{width:18px;高度：18px；z-指数：1111；位置：固定；顶部：100px；左：100px；背景：url(./assets/images/copy.png)不重复；背景尺寸：封面；游标：指针；&:hover{背景:url(./assets/images/hoverCopy.png);}}2.表格使用的方法把改变位置的方法写成public方法，在main.js中引入//控件复制按钮showhidefunctionshowCopy(data,cell,content){if(数据){store.commit('CHANGE_COPYX',cell.getBoundingClientRect().left+(cell.offsetWidth-18-5))store.commit('CHANGE_COPYY',cell.getBoundingClientRect().top+(cell.offsetHeight-28))store.commit('CHANGE_COPYCONTENT',content)}store.commit('CHANGE_COPY',data)}//鼠标进入单元格函数cellMouseEnter(row,column,cell,event){if(column.label=='操作'||column.label=='number'||column.type=='selection')return//控制非溢出隐藏单元格而不显示复制图标spanWidth+20意味着单元格将有左右填充总计20letcellWidth=cell.getElementsByClassName('cell')[0].offsetWidthif(!cell.getElementsByTagName('span')[0])返回letspanWidth=cell.getElementsByTagName('span')[0].offsetWidthif(cellWidth=cell.getBoundingClientRect().left+cell.offsetWidth-5||event.clientY<=cell.getBoundingClientRect().top+1||event.clientY>=cell.getBoundingClientRect().top+单元格.offsetHeight-1){showCopy(false)}}export{showCopy,cellMouseEnter,cellMouseLeave,}3.在页面调用页表中，只需要绑定cell-mouse-enter和cell-mouse-leaveev进入表格。同时需要注意的是，单元格内容需要用span标签包裹，否则无法判断当前表格是否溢出隐藏{{scope.row.address||'-'}}