element表格实现溢出隐藏单元格增加复制按钮

此功能可以实现只写一个公共复制按钮，可以在多个页面的表格中使用，用到了vuex、clipboard，如果不想使用vuex，则需要想办法把复制按钮的位置x、y坐标写成公共的变量

1、复制按钮
如果整个项目有公共的入口文件，可以放在里面，或者可以直接放在app.vue中,copyX,copyY为当前复制按钮所在的位置

2、表格使用的方法
将改变位置的方法写成公共方法，在main.js中引入

// 控制copy按钮显示隐藏
function showCopy(data, cell, content){
  if (data) {
    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)
}

// 鼠标划入单元格
function cellMouseEnter(row, column, cell, event) {
  if (column.label == '操作' || column.label == '序号' || column.type == 'selection') return
  // 控制非溢出隐藏的单元格不显示复制图标 spanWidth + 20是单元格会有左右padding共20
  let cellWidth = cell.getElementsByClassName('cell')[0].offsetWidth
  if (!cell.getElementsByTagName('span')[0]) return
  let spanWidth = cell.getElementsByTagName('span')[0].offsetWidth
  if (cellWidth < spanWidth + 20) {
    showCopy(true, cell, cell.innerText)
  }
}
function cellMouseLeave(row, column, cell, event) {
  // 判断出真的离开当前单元格才消失
  if (
    event.clientX <= cell.getBoundingClientRect().left + 1 ||
    event.clientX >=
    cell.getBoundingClientRect().left + cell.offsetWidth - 5 ||
    event.clientY <= cell.getBoundingClientRect().top + 1 ||
    event.clientY >=
    cell.getBoundingClientRect().top + cell.offsetHeight - 1
  ) {
    showCopy(false)
  }
}

export {
  showCopy,
  cellMouseEnter,
  cellMouseLeave,
}

3、页面调用
页面表格中，只需给表格绑定cell-mouse-enter、cell-mouse-leave事件即可，同时需要注意的是，单元格内容需要用span标签包裹，否则无法判断当前表格是否溢出隐藏