vue通过后台返回的数字显示不同的文字内容,多个内容用、隔开

后台返回的数据

显示效果:

html:

复制代码
  <el-table-column
          align="center"
          label="使用过的小程序"
          width="124"
          v-if="activeTab == 0"
        >
          <template #default="scope">
            <div
              v-for="(item, index) in scope.row.used_applet.split(',')"
              :key="index"
            >
            {{ appletVal[item] }}
              // 判断最后一个元素不显示、
              <span v-if="index !== scope.row.used_applet.split(',').length - 1"
                >、</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="注册来源"
          width="124"
          v-if="activeTab == 0"
        >
          <template #default="scope">
            {{ scope.row.source ? appletVal[scope.row.source] : "-" }}
          </template>
        </el-table-column>

js:

复制代码
const appletVal = {
  0: "-",
  1: "跳乐乐小程序",
  2: "竞赛车小程序",
  3: "室外小程序"
};

//如果返回的值是按1,2,3三这种下标顺序返回的可以直接简写成下面的形式,没有为0的返回值,所以第一位空出来
//const appletVal = ["", "跳乐乐小程序", "竞赛车小程序", "室外小程序"];
相关推荐
ydyd2026042117 分钟前
设备OEE怎么提升?数据采集+分析优化的完整方案
java·服务器·前端
(╹◡╹)37 分钟前
11.RK3588本地大模型内存评估优化
java·linux·前端
电气研究所1 小时前
Java + Redis 实现工业设备告警去抖,避免变频器故障重复推送
java·前端
AI视觉网奇1 小时前
cannot import name ‘model_urls‘ from ‘torchvision.models.resnet‘
linux·前端·javascript
小锋java12341 小时前
【技术专题】Vue3 - 生命周期
vue.js·vite
Vuji1 小时前
深入 pi-agent 内核:完整追踪一次 CLI 交互的完整链路
前端·agent
zfoo-framework1 小时前
安装pi agent 支持duojie和deepseek
java·服务器·前端
Sca_杰1 小时前
微信客服API对接速通
javascript·node.js
l1m0_2 小时前
告别反复修改Prompt:AI生成React应用并落地开发的实战复盘
前端·react.js·ui·ai·设计
xexpertS2 小时前
前端工程转型实践:从 Ember 迁移到 React,提升构建速度与研发效能
前端·react.js·前端框架