vue中filter的应用场景详解

 更新时间:2021年11月21日 16:33:09   作者:qq_44221093  
这篇文章主要为大家介绍了vue中filter的应用场景,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

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双向数据绑定的原理以及知识点总结,并做了代码实例分析,有需要的朋友参考下。
    2018-04-04
  • vuex刷新页面丢失登录token信息的解决方案

    vuex刷新页面丢失登录token信息的解决方案

    本文主要介绍了vuex刷新页面丢失登录token信息的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue+Echarts实现绘制多设备状态甘特图

    Vue+Echarts实现绘制多设备状态甘特图

    这篇文章主要为大家详细介绍了Vue如何结合Echarts实现绘制多设备状态甘特图,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • 在vue组件中使用axios的方法

    在vue组件中使用axios的方法

    下面小编就为大家分享一篇在vue组件中使用axios的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • nuxt.js 缓存实践

    nuxt.js 缓存实践

    这篇文章主要介绍了nuxt.js 缓存实践,nuxt 的缓存可以分为 组件级别缓存 , API级别缓存 以及 页面级别缓存,本文就详细的介绍了这三种缓存,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • Vue3 style CSS 变量注入的实现

    Vue3 style CSS 变量注入的实现

    本文主要介绍了Vue3 style CSS 变量注入的实现,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • TSX常见简单入门用法之Vue3+Vite

    TSX常见简单入门用法之Vue3+Vite

    Vue3的确可以直接使用tsx开发,唯一需要处理的就是children,而且处理起来还是比较不爽的,下面这篇文章主要给大家介绍了关于TSX常见简单入门用法之Vue3+Vite的相关资料,需要的朋友可以参考下
    2022-08-08
  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    Antd-vue Table组件添加Click事件,实现点击某行数据教程

    这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • @click.native和@click的区别及说明

    @click.native和@click的区别及说明

    这篇文章主要介绍了@click.native和@click的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue 页面卡死,点击无反应的问题及解决

    vue 页面卡死,点击无反应的问题及解决

    这篇文章主要介绍了vue 页面卡死,点击无反应的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论