速拓科技是做網(wǎng)站sem網(wǎng)絡(luò)營銷
我們最終想要實現(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", ... 的形式顯示。