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>