纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vue中filter的应用场景 vue中filter的应用场景详解

qq_44221093   2021-11-21 我要评论
想了解vue中filter的应用场景详解的相关内容吗,qq_44221093在本文为您仔细讲解vue中filter的应用场景的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue详解,vuefilter,vuefilter的应用场景,下面大家一起来学习吧。

filter一般用于过滤某些值,比如我这个字段是空,可是我想在前端显示“–”,就可以使用到它了。

最近碰到一个需求就是要给某些字段可以设置权限去以其他形式显示,比如以“***”显示需要隐藏的金额。

1.获取金额权限

2.通过filter过滤满足条件的字段

3.返回隐藏的样式

看代码:

//其他的看,看我标注的就可以了
//scope.row 获取当前行
<template slot-scope="scope">
            <template v-if="item.formType == 'label'">
              <el-button
                v-if="item.link!=undefined"
                type="text" size="small" @click="handleColumnClick(item.link,scope.row)">
                //filter一般不用的过滤用|
                //showLabelValue就不写出来了
                //方法一个参数对应的filter是两个参数
                //第一个是前一列返回的值
                //第N-1个是你想传的值
                {{ scope.row | showLabelValue(item) | canViewAmount(canViewAmount,xtType,item) }}
              </el-button>
              <template v-else>
                {{ scope.row | showLabelValue(item) | canViewAmount(canViewAmount,xtType,item) }}
              </template>
            </template>
</template>
export default {
 filters: {
 //row就是scope.row返回的数据
 showLabelValue(row,item){
 return 'value'
 }
 //value值, canView权限, xtType哪个页面, item列表数据
 //如果showLabelValue返回的是value,对应的canViewAmount参数的value就是‘value'
    canViewAmount(value, canView, xtType, item) {
    //满足条件用“***”显示(只是显示),保存到数据库还是原列表的内容
      if (!canView && xtType == 'salesOrder') {
        if (item.field == 'priceNoTax' || item.field == 'amountNoTax' || item.field == 'price' || item.field == 'amount') {
          return '***'
        }
      }
      if (!canView && xtType == 'project') {
        if (item.field == 'amount' || item.field == 'amountNoTax') {
          return '***'
        }
      }
      return value
    }
  },

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!


相关文章

猜您喜欢

  • Vue路由嵌套 Vue实现路由嵌套的方法实例

    想了解Vue实现路由嵌套的方法实例的相关内容吗,咸鱼_翻身在本文为您仔细讲解Vue路由嵌套的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue路由嵌套,vue路由嵌套问题,vue路由配置,下面大家一起来学习吧。..
  • Redis的5种基本数据结构分析 多维度深入分析Redis的5种基本数据结构

    想了解多维度深入分析Redis的5种基本数据结构的相关内容吗,李子捌在本文为您仔细讲解Redis的5种基本数据结构分析的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Redis的5种基本数据结构,Redis的5种基本数据结构分析,Redis的5种基本数据结构知识点,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.gamecatcher.cn 【绿色软件园】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式