此功能可以实现只写一个公共复制按钮，可以在多个页面的表格中使用，用到了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>