一、首先在vue文件的template中定義復制按鈕

<div size="small" v-if="item.prop == 'jadeCode'" class="cell-container"><span>{{ scope.row.jadeCode }}</span> <button @click="handleCopy(scope.row.jadeCode)" class="copy-button">復制</button></div>

注 ：由于我的代碼時將表頭的label放在script里面用函數獲取并渲染，因此會有一些相關定義，請自行斟酌修改。

• v-if="item.prop == 'jadeCode'"：這是一個條件判斷語句，用于判斷當前正在渲染的單元格是否對應著貨物編碼(jadeCode)這個屬性。只有當item.prop的值等于'jadeCode'時，才會渲染該div元素。
• size="small"：用于設置div元素的大小為小號（small）。
• class="cell-container"：給div元素添加一個名為cell-container的CSS類。
• {{ scope.row.jadeCode }}：使用雙大括號插值語法將scope.row.jadeCode的值顯示在span元素內。scope.row表示當前行的數據對象，jadeCode表示貨物編碼屬性的值。
• <button @click="handleCopy(scope.row.jadeCode)" class="copy-button">復制</button>：渲染了一個按鈕元素，并綁定了點擊事件@click，當按鈕被點擊時，會調用handleCopy方法，并將scope.row.jadeCode作為參數傳遞給該方法。按鈕上還添加了一個名為copy-button的CSS類。

二、接著定義復制文本的函數

在<script>中寫下：

methods: {handleCopy(jadeCode) {try {navigator.clipboard.writeText(jadeCode);alert('貨品編碼已復制到剪切板');} catch (error) {console.error('復制貨品編碼失敗：', error);alert('復制貨品編碼失敗');}},
},

三、最后在<style>中調整復制按鈕的外觀和位置

.cell-container {     position: relative;
}.copy-button {        position: absolute;right: 0;top: 112px;  /*如果你希望在不同的顯示器上保持一致的按鈕位置，可以考慮使用像素單位來進行定位，這樣按鈕的位置將與屏幕上的絕對坐標相關聯。*/
}

四、最終效果

?

可以將貨品編號粘貼出來