vue 把后端返回的数组根据dict输出为对应中文

人间不想清醒

已于 2022-11-03 21:40:35 修改

阅读量1.7k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-10-27 17:22:47 首次发布

本文链接：https://blog.csdn.net/qinghuanduji/article/details/127555700

版权

v-model

vue中v-model实质上绑定的是value、checked、selected。

option

三个属性的意义：

key：
相当于身份ID，是唯一的。
没有也行，但是官网推荐还是加上为好。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。
value：
点击某个label(option)之后，将对应的值给v-model绑定的值model
label：
显示给用户的选项内容

输出为对应中文（回显）

首先设置一个option如下所示。

selectOptions: [
      {
      	key: selectOptions_enum.one,
        value: 1,
        label: "开心",
      },
      {
      	key: selectOptions_enum.two,
        value: 2,
        label: "健康",
      },
      {
      	key: selectOptions_enum.three,
        value: 3,
        label: "快乐",
      },
    ]

如果可以多选，返回值为一个list，例如:[1,3,8,21,56]
需求是想通过option中取到对应的label并直接显示对应的名称比如：开心、快乐…
直接放一段正确代码：
假设绑定的v-model为ch_type——性格特征

// 定义一个列表以便刷值，foreach好像不能逐个修改（层级关系，这个我不太清楚）
var ch_name = [];
//循环列表ch_type=[1,3,8]
item.ch_type.forEach((type) =>{
	// 在option中找与type匹配的对象
   var typelist = selectOptions.find((res) => res.value == type);
   // 把对应的label放入新的列表中
   ch_name.push(typelist.label);
 });
 //由于此处item是接口返回的，直接对它进行了修改，并修改成换行显示
 item.ch_type= ch_name.join("\n");

此时返回的应该就是以下形式：

开心
快乐
平安

下拉框select

直接使用v-for

表单column回显

表单由于使用的是一个对象的各种属性，所以使用的是prop进行的属性传递，此时prop传过来的是int类型的数字，但是需要在前端显示对应的中文，
先是想使用label属性，但是看的教程都是label="开心"这种类型的，而实际的是需要根据情况处理不同的值，而且不可能都hard code，想使用方法但是好像也不对。
参照了别人的方法，在column里面加插槽方法。具体如下：

<template #default="scope">
  <span>{{change(scope.row.option.id)}}</span>
</template>

方法如下：
该函数在computed中定义，且在函数中写的是return function，否则会报错（小白，以后补原理吧，先记录一下。）

  computed: {
    changetolabel(){
      return function(id){
        var option_name = selectOptions.find((item)=> item.value == id);
        return option_name .label;
      }
    },
  }

小坑

filter和find
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素，该方法不改变原数组，返回的是筛选后满足条件的数组。
filter属性取到的是对象列表，即：[{key: selectOptions_enum.one,value: 1,label: “开心”},{key: selectOptions_enum.three,value: 3,label: “快乐”}]
find直接取到了对象：{key: selectOptions_enum.one,value: 1,label: “开心”}，因此直接可以“.label”
因此当时直接使用：selectOptions.filter().label是报错的，甚至页面都挂了。
当时参照别人的教程写成了:selectOptions[type].label的形式，本意是想通过key值找到对应的obj再找到熟属性label，但是这种写法的type是数组序号，一般是从0开始，而此时对应的value却是从1开始，甚至有的不是按顺序的，所以出错。
对js用法不是很熟悉，这部分是否能这样做就懒得探究了。