Vue 建立自定义过滤器

前端实践 专栏收录该内容
19 篇文章 2 订阅

Vue 建立自定义过滤器

实现效果图

    系统中有很多地方会用到数据字典,对于这部分内容我们只需要知道对应编码就可以通过自定义的过滤器在前端实现动态的加载这些信息内容。如下图的地区名称:
在这里插入图片描述

关键代码

    Html部分的只需要将userInfo.area编码传入dictName过滤器:

 <span lable="地区:" ">{{ userInfo.area| dictName(dicts['USERINFO'])}}</span>

    JS文件部分通过过滤方法返回code对应名称

// 过滤器执行的方法
let dictName = (code, dictList) => {
  let name = '';
  if (code && dictList) {
    dictList.forEach((item) => {
      if (item.code == code) {
        name = item.name;
      }
    });
  }
  return name;
}
// 提供给外部调用的方法名
export { dictName }

文后总结

     一个实现起来很简单,用起来很方便的过滤器方法。荣幸与您分享~

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值