zoukankan      html  css  js  c++  java
  • 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进行转换。

  • 相关阅读:
    C学习笔记-typedef
    C学习笔记-typedef
    C语言之联合体
    C语言之联合体
    Browsersync 省时浏览器同步测试工具,浏览器自动刷新,多终端同步
    Gulp学习指南之CSS合并、压缩与MD5命名及路径替换
    es6 添加事件监听
    珠峰
    js添加触摸时间,禁止页面缩放
    百度地图叠加扇形区域,也可以做成异性区域
  • 原文地址:https://www.cnblogs.com/zwh0910/p/15103593.html
Copyright © 2011-2022 走看看