我們最終想要實現(xiàn)的效果如圖，從后端獲取數(shù)據(jù)之后，不使用data中的id，而是使用自己生成的按照順序自增的序號id。

script

<template><el-table :data="sticker" border style="width: 100%" id="stickerList"><el-table-column label="序號" width="180"><template #default="{ $index }">{{ formatIndex($index + 1) }}</template></el-table-column><el-table-column prop="stickerName" label="名字" width="180" /><el-table-column prop="context" label="內(nèi)容" /></el-table><img :src="base64img" alt=""><el-button type="primary" @click="printPicture()">截圖</el-button>
</template><script setup>
import { stickerListService } from '@/api/sticker.js'
import { ref } from 'vue';
import { onMounted } from 'vue'const sticker = ref([{id:'',stickerName:'',context:''}
])const stickerList = async function () {let result = await stickerListService()// 添加序號并保存sticker.value = result.data;
}// 格式化序號為 "001", "002", ...
const formatIndex = (index) => {return index.toString().padStart(3, '0');
}onMounted(() => {stickerList()
})
</script>

簡單解釋一下這段代碼，大致思路就是接受到后端傳來的數(shù)據(jù)后，不調(diào)用id。而是自定義序號

先看這段代碼

const formatIndex = (index) => {return index.toString().padStart(3, '0');
}

具體來說：

• index：是一個數(shù)字，表示當(dāng)前元素在數(shù)組中的索引
• index.toString（）：將數(shù)字轉(zhuǎn)為字符串
• padStart（3，'0'）：用于確保字符串的長度為3，如果長度不夠，則在字符串的開始位置用 0 進(jìn)行填充。這確保了序號以001，002，003這樣的形式顯示。

例如：此時的index為 1 那么就先轉(zhuǎn)為字符串 1 然后在它前面進(jìn)行字符填充知到字符串的長度為3，則此時返回的字符串變?yōu)榱?01。

<el-table-column label="序號" width="180"><template #default="{ $index }">{{ formatIndex($index + 1) }}</template>
</el-table-column>

在Vue.js中，<el-table-column>?中的template部分是一個插槽 (slot)，用于自定義表格列的內(nèi)容。使用了一個默認(rèn)插槽 #default?來自定義表格中 "序號" 列的顯示方式。

<template #default="{ $index }">：這是一個插槽，用于自定義列的內(nèi)容。@default 是插槽的默認(rèn)名稱，表示這個插槽用于列的默認(rèn)內(nèi)容。$index 是一個 Vue.js 提供的特殊變量，表示當(dāng)前元素在數(shù)組中的索引。

{{ formatIndex($index + 1) }}：這是在插槽中使用的模板語法。formatIndex是我們剛才定義的一個方法，用于格式化序號。$index + 1表示當(dāng)前元素在數(shù)組中的索引加1，因為我們希望序號從1開始而不是從0開始。

所以，這段代碼的作用是在表格的 "序號" 列中顯示格式化后的序號，通過調(diào)用方法，確保序號以 "001", "002", ... 的形式顯示。