VUE页面中通过双击实现复制表格中内容

VUE页面中通过双击实现复制表格中内容

1. 页面预览：

2. vue中代码实现：

 <template>
  <el-table
    :data="tableData"
    height="250"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <span @dblclick="copyVale(scope.row.name)">
          {{scope.row.name}}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '张三',
          address: '上海市普陀区金沙江路 1511 弄'
        }, {
          date: '2016-05-02',
          name: '李四',
          address: '上海市普陀区金沙江路 1512 弄'
        }, {
          date: '2016-05-04',
          name: '王五',
          address: '上海市普陀区金沙江路 1513 弄'
        }]
      }
    },
    methods: {
      copyVale(v) {
        this.$message({message: '复制成功，内容为：‘' + v + '’', type:'success'})

        var inputEle = document.createElement("input");
        inputEle.style.display = "none"
        inputEle.value = v
        inputEle.select()
        document.execCommand("Copy")
        inputEle.remove()
      }
    }
  }
</script>