vue的filters过滤器优化

原来的过滤器是这样子的:

filters: {
    formatType(val){
      if (val === '1') {
        return '芳香水剂';
      } else if (val === '2') {
        return '溶液剂';
      } else if (val === '3') {
        return '注射剂';
      } else if (val === '4') {
        return '合剂';
      } else if (val === '5') {
        return '洗剂';
      } else if (val === '6') {
        return '擦剂';
      } else if (val === '7') {
        return '气雾剂';
      } else if (val === '8') {
        return '喷雾剂';
      } else if (val === '9') {
        return '散剂';
      } else if (val === '10') {
        return '丸剂';
      } else if (val === '11') {
        return '片剂';
      } else if (val === '12') {
        return '膜剂';
      } else if (val === '13') {
        return '软膏剂';
      } else if (val === '14') {
        return '栓剂';
      } else if (val === '15') {
        return '糊剂';
      } else if (val === '16') {
        return '颗粒剂';
      } else if (val === '17') {
        return '粉剂';
      } else if (val === '18') {
        return '粉针剂';
      } else if (val === '19') {
        return '胶囊剂';
      } else if (val === '20') {
        return '口服剂';
      } else if (val === '21') {
        return '乳膏剂';
      } else if (val === '22') {
        return '针剂';
      } else if (val === '23') {
        return '保健食品';
      } else if (val === '24') {
        return '保健食品胶囊剂';
      } else if (val === '25') {
        return '保健食品口服液';
      } else if (val === '26') {
        return '保健食品片剂';
      } else if (val === '27') {
        return '蜜丸';
      } else if (val === '28') {
        return '浓缩蜜丸';
      } else if (val === '29') {
        return '浓缩丸';
      } else if (val === '30') {
        return '食品饮料';
      } else if (val === '31') {
        return '水蜜丸';
      } else if (val === '32') {
        return '水丸';
      } else if (val === '33') {
        return '糖浆剂';
      } else if (val === '34') {
        return '贴剂';
      } else if (val === '35') {
        return '牙膏';
      } else if (val === '36') {
        return '药品贴剂';
      } else if (val === '37') {
        return '医疗器械';
      } else if (val === '39') {
        return '片剂(分散)';
      } else if (val === '40') {
        return '片剂(薄膜衣)';
      } else if (val === '41') {
        return '片剂(糖衣)';
      } else if (val === '42') {
        return '贴膏剂(凝胶膏剂)';
      } else if (val === '43') {
        return '贴膏剂(橡胶膏剂)';
      } else if (val === '44') {
        return '胶囊剂(缓释)';
      } else if (val === '99') {
        return '其他';
      }
    }
  },

如果数据字典中的记录很多的话就很麻烦。

现在通过遍历数组来取值的方式处理，大大节省了工作量

第一步：定义全局变量

let that

注意：let that 放在export default上面

第二步：在created 中给that初始化

created() {
    that = this
    this.getList()
  },

第三步：在filters中写过滤器

filters: {
    formatType(val){
      let rs = ''
      for (const item of that.productTypeList) {
        if (item.dictCode == val) {
          rs = item.dictName
          break
        }
      }
      return rs
    }
  },

注意：在过滤器中用this的话，this为undefined，必须用that进行转换。

第四步：发起请求

data() {
    return {
      materialTypeList: [],
      materialTypeDataCode: 'MATERIAL_TYPE'
    }
  },
created() {
    this.getMaterialType()
  },
// 获取物料类型
    getMaterialType() {
      dataSet.getDataSetItemByDataSet({
        dataCode: this.materialTypeDataCode
      }).then(res => {
        this.materialTypeList = res.data[0].itemList
      }, err => {
        this.$message.error('查询物料类型失败，请稍后再试')
        console.log(err)
      })
    }