vue点击按钮实现复制

需求:

点击复制id按钮,实现复制

效果图

实现代码

<template>
  <div class="hello">
    <el-table :data="tableData" style="width:400px">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="copyid(scope.row.id)">复制id</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [
        {name: '张三', id: '1111111'},
        {name: '赵四', id: '2222222'},
        {name: '王五', id: '3333333'},
        {name: '陈六', id: '4444444'},
      ]
    }
  },
  methods: {
    copyid(value){
      console.log('复制id', value)
      let eInput = document.createElement('input')
      eInput.value = value
      document.body.appendChild(eInput)
      eInput.select() //选择对象
      let copyText = document.execCommand('Copy') //执行浏览器的复制命令
      eInput.style.display = 'none'
      if (copyText) this.$message.success('复制成功')
    }
  },
}
</script>