前端如何在接口返回字符串类型的数值转化在浏览器中转化为对应文字并且逗号隔开

Posted 2022-12-16 coderkey

一，问题

后端接口中返回字符串类型的数值如何转化在浏览器中转化为对应文字用逗号隔开
0代表微信 1代表QQ 2代表邮件 3代表语音

---

二，方法

第一步：假设后端返回的数据

      // 假设是后端返回的数据
      typeData: [
        
          enableTypes: "0,1",
          id: "100001",
          user: "张三",
        ,
        
          enableTypes: "1,2",
          id: "100002",
          user: "李四",
        ,
        
          enableTypes: "2,3",
          id: "100003",
          user: "王五",
        ,
        
          enableTypes: "0,3",
          id: "100004",
          user: "赵六",
        ,
      ],

第二步：映射类型 定义一个数组

 // 映射
      typeMap: [
        
          value: "微信",
          type: 0,
        ,
        
          value: "QQ",
          type: 1,
        ,
        
          value: "邮箱",
          type: 2,
        ,
        
          value: "语音",
          type: 3,
        ,
      ],

第三步：数据处理写在计算属性里

 // 计算属性
  computed: 
    getTypeData() 
      console.log(444);
      return (str) => 
        return String(str.split(",").map((item) => this.typeMap[item].value));
      ;
    ,
  

第四步：模板展示

<template>
  <div class="home">
    <table class="pure-table pure-table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>信息类型</th>
        </tr>
      </thead>

      <tbody v-for="(item, index) in typeData" :key="index">
        <tr>
          <td> item.id </td>
          <!-- <td> item.enableTypes</td> -->
          <td> getTypeData(item.enableTypes) </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

第五步：测试结果

处理前

处理后

---

三，完整测试代码

<template>
  <div class="home">
    <table class="pure-table pure-table-bordered">
      <thead>
        <tr>
          <th>#</th>
          <th>信息类型</th>
        </tr>
      </thead>

      <tbody v-for="(item, index) in typeData" :key="index">
        <tr>
          <td> item.id </td>
          <td> item.enableTypes</td>
          <!-- <td> getTypeData(item.enableTypes) </td> -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default 
  name: "HomeView",
  components: 
    HelloWorld,
  ,
  data() 
    return 
      // 假设是后端返回的数据
      typeData: [
        
          enableTypes: "0,1",
          id: "100001",
          user: "张三",
        ,
        
          enableTypes: "1,2",
          id: "100002",
          user: "李四",
        ,
        
          enableTypes: "2,3",
          id: "100003",
          user: "王五",
        ,
        
          enableTypes: "0,3",
          id: "100004",
          user: "赵六",
        ,
      ],
      // 映射
      typeMap: [
        
          value: "微信",
          type: 0,
        ,
        
          value: "QQ",
          type: 1,
        ,
        
          value: "邮箱",
          type: 2,
        ,
        
          value: "语音",
          type: 3,
        ,
      ],
    ;
  ,
  // 计算属性
  computed: 
    getTypeData() 
      console.log(444);
      return (str) => 
        return String(str.split(",").map((item) => this.typeMap[item].value));
      ;
    ,
  ,
;
</script>
<style scoped>
html 
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;


body 
  margin: 10px;

table 
  border-collapse: collapse;
  border-spacing: 0;

tr 
  border-bottom: 1px solid #cbcbcb;

td,
th 
  padding: 0;


.pure-table 
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;


.pure-table caption 
  color: #000;
  font: italic 85%/1 arial, sans-serif;
  padding: 1em 0;
  text-align: center;


.pure-table td,
.pure-table th 
  border-left: 1px solid #cbcbcb;
  border-width: 0 0 0 1px;
  font-size: inherit;
  margin: 0;
  overflow: visible;
  padding: 0.5em 1em;


.pure-table thead 
  background-color: #e0e0e0;
  color: #000;
  text-align: left;
  vertical-align: bottom;


.pure-table td 
  background-color: transparent;

.pure-table-bordered td 
  border-bottom: 1px solid #cbcbcb;


.pure-table-bordered tbody > tr:last-child > td 
  border-bottom-width: 0;

</style>

---