茂名快速建站模板,模板建站符合哪些工作需求?,互联网开网站怎么做,四川成都最新消息我们最终想要实现的效果如图#xff0c;从后端获取数据之后#xff0c;不使用data中的id#xff0c;而是使用自己生成的按照顺序自增的序号id。 script
templateel-table :datasticker border stylewidth: 100% idstickerList从后端获取数据之后不使用data中的id而是使用自己生成的按照顺序自增的序号id。 script
templateel-table :datasticker border stylewidth: 100% idstickerListel-table-column label序号 width180template #default{ $index }{{ formatIndex($index 1) }}/template/el-table-columnel-table-column propstickerName label名字 width180 /el-table-column propcontext label内容 //el-tableimg :srcbase64img altel-button typeprimary clickprintPicture()截图/el-button
/templatescript setup
import { stickerListService } from /api/sticker.js
import { ref } from vue;
import { onMounted } from vueconst 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简单解释一下这段代码大致思路就是接受到后端传来的数据后不调用id。而是自定义序号 先看这段代码
const formatIndex (index) {return index.toString().padStart(3, 0);
}具体来说 index是一个数字表示当前元素在数组中的索引index.toString将数字转为字符串padStart30用于确保字符串的长度为3如果长度不够则在字符串的开始位置用 0 进行填充。这确保了序号以001002003这样的形式显示。 例如此时的index为 1 那么就先转为字符串 1 然后在它前面进行字符填充知到字符串的长度为3则此时返回的字符串变为了001。 el-table-column label序号 width180template #default{ $index }{{ formatIndex($index 1) }}/template
/el-table-column在Vue.js中el-table-column 中的template部分是一个插槽 (slot)用于自定义表格列的内容。使用了一个默认插槽 #default 来自定义表格中 序号 列的显示方式。
template #default{ $index }这是一个插槽用于自定义列的内容。default 是插槽的默认名称表示这个插槽用于列的默认内容。$index 是一个 Vue.js 提供的特殊变量表示当前元素在数组中的索引。
{{ formatIndex($index 1) }}这是在插槽中使用的模板语法。formatIndex是我们刚才定义的一个方法用于格式化序号。$index 1表示当前元素在数组中的索引加1因为我们希望序号从1开始而不是从0开始。
所以这段代码的作用是在表格的 序号 列中显示格式化后的序号通过调用方法确保序号以 001, 002, ... 的形式显示。
