Vue局部过滤器使用方法

最新推荐文章于 2024-09-05 13:30:00 发布

张清悠

最新推荐文章于 2024-09-05 13:30:00 发布

阅读量2.4k

点赞数

分类专栏： 💥Vue💥

本文链接：https://blog.csdn.net/weixin_48193717/article/details/108567272

版权

💥Vue💥 专栏收录该内容

36 篇文章 4 订阅

订阅专栏

需求：过滤API接口中的数字，不同数字转换不同等级

Filters局部过滤器

渲染到的数据：
在这里插入图片描述
转换之后：

代码如下：

  <el-table
    :data="tableData"
    style="width: 100%"
    >
       <el-table-column type="index" align="center" label="#" width="80"></el-table-column>
    <el-table-column
      prop="authName"
      label="权限名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="path"
      label="路径"
      width="180">
    </el-table-column>
    <el-table-column
      prop="level"
      label="权限等级" 
      >
      //过滤器
      <template slot-scope="scoped">
        <el-tag :type="scoped.row.level | tagtype">{{scoped.row.level | aa}}</el-tag>
      </template>
    </el-table-column>
    
  </el-table>

JavaScript代码

export default {
//过滤器
  filters:{
    aa(ele){
      if(ele==0){
        return '一级'
      }else if(ele==1){
        return '二级'
      }else if(ele==2){
        return '三级'
      }
    },
    //element ui button样式
    tagtype(ele){
          if(ele==0){
        return 'success'
      }else if(ele==1){
        return 'warning'
      }else if(ele==2){
        return 'danger'
      }
    }
  },
  }