table中每个单元格添加一键复制功能

1.第一步

npm install --save vue-clipboard2

2.第二步

在main.js中引入

import VueClipboard from 'vue-clipboard2'
 
Vue.use(VueClipboard)

3.在vue文件中添加复制类文字

     <Table
        :data="arr"
        size="small"
        border>
        <TableColumn v-for="(item,index) in tableTitle.titleList" :label="item" :key="item.id"  align="left" prop="scope"  style="position: relative ;" min-width="105" >
          <template slot-scope="scope">
            <div  class="rds-show">
              <div class="rds-show-copy" @click.stop="copyText(scope.row,item)">复制</div>
              {{scope.row[item]}}
            </div>
          </template>
        </TableColumn>
      </Table>

4.在methods中写入方法，data是传入的对象，key是传入对象对应的键

      copyText(data,key){
        let container = this.$refs.container;
        this.$copyText(data[key]).then((e) =>{
            this.$message({
              showClose: true,
              message: "复制成功",
              type: "success",
              duration:'1000'
            });
          }, (e) =>{
            this.$message({
              showClose: true,
              message: "复制失败，请手动复制",
              type: "error",
            });
          }
        );
      },