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

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

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

<template>
  <div id='app'>
    <router-view></router-view>
    <div class="copyBtn" v-show="$store.state.showCopy" :style="{left: $store.state.copyX + 'px', top: $store.state.copyY + 'px'}" @click="copy"></div>
  </div>
</template>

<script>
  import Clipboard from 'clipboard'
  export default {
    name: 'app',
    methods: {
      // 复制方法
      copy() {
        let content = this.$store.state.copyContent
        let clipboard = new Clipboard('.copyBtn', {
          text: function () {
            return content
          }
        })
        clipboard.on('success', e => {
          this.$message({message: '复制成功', type: 'success'})
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          this.$message({message: '复制失败,', type: 'error'})
          clipboard.destroy()
        })
      }
    }
  }
</script>

<style lang="scss">
  #app{
    position: relative
  }
  .copyBtn{
    width: 18px;
    height: 18px;
    z-index: 1111;
    position: fixed;
    top: 100px;
    left: 100px;
    background: url(./assets/images/copy.png) no-repeat;
    background-size: cover;
    cursor: pointer;
    &:hover{
      background: url(./assets/images/hoverCopy.png);
    }
  }
</style>

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标签包裹，否则无法判断当前表格是否溢出隐藏

<el-table
  :data="tableData"
  tooltip-effect="light"
  @cell-mouse-enter="$cellMouseEnter"
  @cell-mouse-leave="$cellMouseLeave"
>
  <el-table-column prop="address" label="地址" :show-overflow-tooltip="true">
    <template slot-scope="scope">
      <span>{{ scope.row.address || '-' }}</span>
    </template>
 </el-table-column>        
</el-table>