el-table 表格行内（el-table-column）添加复制按钮

根据需求显示，要在表格内某列添加复制按钮，并实现复制功能。

需求1.直接在行内添加复制按钮，不让他换行，在 el-table-column添加show-overflow-tooltip

代码实现：

<el-table-column
      prop="assetName"
      min-width="160"
      property="地址名称"
      label="地址名称"
      show-overflow-tooltip
    >
      <template #default="scope">
        <div>
          <el-button
            link
            type="primary"
            icon="DocumentCopy"
            @click="copyData(scope.row)"
          ></el-button>
          {{ scope.row.assetName }}
        </div>
      </template>
    </el-table-column>


const copyData = row => {
  var Url2 = row.assetName; //每一行的某个值，如选中的当前行的url
  var oInput = document.createElement('input'); //创建一个隐藏input（重要！）
  oInput.value = Url2; //赋值
  document.body.appendChild(oInput);
  oInput.select(); // 选择对象
  document.execCommand('Copy'); // 执行浏览器复制命令
  oInput.className = 'oInput';
  oInput.style.display = 'none';
  ElMessage.success('已复制');
};

需求2 .不直接在行内添加复制按钮，在其tooltip后面添加复制按钮

代码实现：

 <el-table-column
      prop="assetName"
      min-width="160"
      property="地址名称"
      label="地址名称"
    >
      <template #default="scope">
        <div>
          <el-tooltip placement="top" popper-class="tool-tip">
            <template #content>
              <el-button
                link
                type="primary"
                icon="DocumentCopy"
                @click="copyData(scope.row)"
              >
                复制
              </el-button>
              {{ scope.row.assetName }}
            </template>
            {{
              scope.row.assetName.substring(
                0,
                Math.min(30, scope.row.assetName.length)
              ) + '...'
            }}
          </el-tooltip>
        </div>
      </template>
    </el-table-column>


const copyData = row => {
  var Url2 = row.assetName; //每一行的某个值，如选中的当前行的url
  var oInput = document.createElement('input'); //创建一个隐藏input（重要！）
  oInput.value = Url2; //赋值
  document.body.appendChild(oInput);
  oInput.select(); // 选择对象
  document.execCommand('Copy'); // 执行浏览器复制命令
  oInput.className = 'oInput';
  oInput.style.display = 'none';
  ElMessage.success('已复制');
};

以上是在两种不同的位置添加复制按钮，希望对你有所帮助