Element Plus 表格中的复制功能使用实战指南

<el-table
  :data="tableData"
  @cell-dblclick="handleCellDblClick">
  <!-- 表格列配置 -->
</el-table>

function handleCellDblClick(row, column, cell, event) {
  // row: 当前行数据对象
  // column: 当前列配置对象
  // cell: 单元格DOM元素
  // event: 原生事件对象
}

@cell-dblclick="handleCellDblClick"

/** 处理单元格双击事件 - 复制到剪贴板 */
function handleCellDblClick(row, column, cell, event) {
  // 获取单元格的文本内容
  let cellText = ''
  // 如果是电厂列，需要获取label
  if (column.property === 'power_plant') {
    cellText = getPowerPlantLabel(row.power_plant) || ''
  } else if (column.property === 'similar_power_plant') {
    cellText = getPowerPlantLabel(row.similar_power_plant) || ''
  } else {
    // 其他列直接获取属性值
    cellText = row[column.property] || ''
  }
  // 转换为字符串
  cellText = String(cellText)
  // 复制到剪贴板
  if (navigator.clipboard && navigator.clipboard.writeText) {
    // 使用现代 Clipboard API
    navigator.clipboard.writeText(cellText).then(() => {
      proxy.$modal.msgSuccess('已复制到剪贴板')
    }).catch(err => {
      console.error('复制失败:', err)
      // 降级到传统方法
      copyTextToClipboard(cellText)
      proxy.$modal.msgSuccess('已复制到剪贴板')
    })
  } else {
    // 降级到传统方法
    copyTextToClipboard(cellText)
    proxy.$modal.msgSuccess('已复制到剪贴板')
  }
}

// 标准方式
cellText = row[column.property] || '';
// DOM方式
cellText = cell.textContent || cell.innerText || '';
// 自定义列处理
if (column.property === 'power_plant') {
  cellText = getPowerPlantLabel(row.power_plant) || '';
}

if (column.property === 'power_plant') {
  cellText = getPowerPlantLabel(row.power_plant) || '';
} else if (column.property === 'similar_power_plant') {
  cellText = getPowerPlantLabel(row.similar_power_plant) || '';
} else {
  cellText = row[column.property] || '';
}

@cell-click="handleCellClick"
@row-click="handleRowClick"
@row-dblclick="handleRowDblClick"
@cell-contextmenu="handleCellContextMenu"

function handleCellDblClick(row, column) {
  const text = row[column.property] || '';
  navigator.clipboard?.writeText(text)
    .then(() => console.log('复制成功'));
}

function handleCellDblClick(row, column) {
  let text = '';
  switch(column.property) {
    case 'date': text = formatDate(row.date); break;
    case 'amount': text = formatCurrency(row.amount); break;
    default: text = row[column.property] || '';
  }
  copyToClipboard(text);
}

function handleRowDblClick(row) {
  copyToClipboard(JSON.stringify(row, null, 2));
}

cell.style.backgroundColor = '#e6f7ff';
setTimeout(() => cell.style.backgroundColor = '', 300);

ElMessage.success(`已复制: ${text}`);

if (['id', 'actions'].includes(column.property)) return;