Cómo usar los filtros parciales de Vue

Requisitos: filtrar los números en la interfaz de API y convertir diferentes números a diferentes niveles

Filtros locales

Datos renderizados:

después de la conversión: el

código es el siguiente:

  <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>

Código 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'
      }
    }
  },
  }

Bienvenido a unirse al grupo para discusiones técnicas, número de grupo: 954314851