当前位置:首页 » 《休闲阅读》 » 正文

前端实现表格生成序号001、002、003自增

28 人参与  2024年04月18日 08:22  分类 : 《休闲阅读》  评论

点击全文阅读


我们最终想要实现的效果如图,从后端获取数据之后,不使用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="内容" />  </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>

简单解释一下这段代码,大致思路就是接受到后端传来的数据后,不调用id。而是自定义序号

先看这段代码

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

具体来说:

index:是一个数字,表示当前元素在数组中的索引index.toString():将数字转为字符串padStart(3,'0'):用于确保字符串的长度为3,如果长度不够,则在字符串的开始位置用 0 进行填充。这确保了序号以001,002,003这样的形式显示。

例如:此时的index为 1 那么就先转为字符串 1 然后在它前面进行字符填充知到字符串的长度为3,则此时返回的字符串变为了001。

<el-table-column label="序号" width="180">  <template #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", ... 的形式显示。


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/96862.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 从市府大秘到权力巅峰读者推荐_陆一鸣凌思文后续+完结_小说后续在线阅读_无删减免费完结_
  • 周晚黎厉北辰小说(死后我弃夫虐茶,独美不原谅)(周晚黎厉北辰)全书+后续+结局在线阅读
  • 小说大结局小说山与星辰小说已更新+特别篇(林景山苏星辰)纯净版
  • 终章小说顾澜音封灼年完结篇(碑婚)已更新+延伸(顾澜音封灼年)清爽版
  • 宋予柯奕烜小说小说全集+延伸+完本(玩笑沦陷)畅享在线阅读
  • 宋璃陆泽野小说(七零大院:离婚后嫁绝嗣京少多胎)小说结尾+隐藏篇章(宋璃陆泽野)畅享阅读
  • 完结文重生后我让校花保管所有准考证完结+结局+番外宝藏美文列表_完结文重生后我让校花保管所有准考证完结+结局+番外宝藏美文(秦雨然江述怀洛瑶)
  • 重生在高考前,我笑着送小青梅和小混混去庆祝成人礼一口气读完乔念沈晏安陆坤完本_重生在高考前,我笑着送小青梅和小混混去庆祝成人礼一口气读完(乔念沈晏安陆坤)
  • 此后锦书休寄免费品鉴(阮时苒厉寒霆),此后锦书休寄免费品鉴
  • 高分_玩笑沦陷小说(宋予柯奕烜)(玩笑沦陷)全本完整阅读
  • 离婚后,假千金她成了万人迷是什么小说(江浸月陆明渊)(离婚后,假千金她成了万人迷)全本完整清爽版在线+无广告结局
  • 晚晚的重生回到全家被杀的除夕夜+整本林炎晚晚全书在线

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1