vue中字典值存在多个进行反写

在dicts中引入字典表

dicts: [ 'archive_material', 'service_status'],

在created中定义方法

在data中定义一个全局变量  archiveMater

 this.getDicts("archive_material").then(response => {
      this.archiveMater = response.data;
    });

在methods中定义一个方法

    archiveMaterDict(val) {
      if (val) { // 首先判断val不为空的情况下
        if (val.indexOf(",") != -1) { // 根据，进行查找找到了为-1
          var idx = val.split(",").filter(item => item != '');//使用一个变量接收用，分割之后的数组
          var v = ""; // 定义一个空的字符串
          for (var i = 0; i < idx.length; i++) { // 将接收到分割之后的数组进行循环
            var a = idx[i]; // 定义一个变量接收循环之后数组的值
            var idxv = this.archiveMater.findIndex(item => item.dictValue == a) // 根据字典表中的值去寻找后台给你的字典值如果相等返回-1
            if (idxv != -1) {
              if ( i == 0) {
                v += this.archiveMater[idxv].dictLabel // 如果只有一个或者没有的情况下 不加逗号
              } else {
                console.log("这个是几"  +i + ":",idxv)
                v += "," + this.archiveMater[idxv].dictLabel // 将字典表值进行返回 同时拼一个，号
              }
            }
          }
          return v; // 最后将v返回
        }
      }
      var idx = this.archiveMater.findIndex(item => item.dictValue == val)
      if (idx != -1) {
        return this.archiveMater[idx].dictLabel
      } else {
        return ''
      }
    },

单个字典值反写

data定义全局变量

booleanYes: [],

cerated里面写方法

   this.getDicts("boolean_yes_no").then(response => {
      this.booleanYes = response.data;
    });

methods里面写方法

    booleanYesDict(val) {
      var idx = this.booleanYes.findIndex(item => item.dictValue == val)
      if (idx != -1) {
        return this.booleanYes[idx].dictLabel
      } else {
        return ''
      }
    },

在表格里调用

{{ booleanYesDict(form.gpError) }}

第二种方法（简单）

<template slot-scope="{row}">
  <dict-tag :options="dict.type.slh_device_type" :value="row.deviceType"/>
</template>