-1

Boa tarde pessoal, fiz uma tabela que tem seus dados iterados através do v-for, ocorre que eu preciso filtrar essa tabela por coluna eu encontrei a função filter porém só consigo filtrar uma quero poder filtrar o resultado desse filter usando os critérios das outras colunas.

pensei em por && no filtro da primeira table mas ele só mostra resultado se preencher todos os campos ou || mas ele vai me mostrando qq coisa que eu digitar no input

Segue o código que estou usando para filtrar

tenho essa table aqui : tabela com v-for

segue código :

<script>

export default {
  data() {
    return {
      CodigoPapel: "",
      CodigoTipoNegociacao: "",
      listas: [
        {
          CodigoPapel: 90,
          NomeEmpresa: "IRBR1",
          CodigoTipoNegociacao: 77,
        },
        {
          CodigoPapel: 90,
          NomeEmpresa: "ARGX4",
          CodigoTipoNegociacao: 3,
        },
        {
          CodigoPapel: 12,
          NomeEmpresa: "Petrobras",
          CodigoTipoNegociacao: 3,
        },
      ],
    };
  },
  computed: {
    
    listaFiltrada: function () {
      
     return this.listas.filter((item)=> {
       return item.CodigoPapel == this.CodigoPapel
     })
    },
  },

  
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

1 Resposta 1

0

Você só precisa incluir as condições dentro da função da filter, retornando true para caso o elemento deve aparecer, ou false para caso ele deva ser filtrado:

const lista = [{"CodigoPapel":90,"NomeEmpresa":"IRBR1","CodigoTipoNegociacao":77},{"CodigoPapel":90,"NomeEmpresa":"ARGX4","CodigoTipoNegociacao":3},{"CodigoPapel":12,"NomeEmpresa":"Petrobras","CodigoTipoNegociacao":3}]

this.CodigoTipoNegociacao = '3'
this.CodigoPapel = ''

const resultado = lista.filter(item => {
    let aparece = true
    if (this.CodigoPapel) aparece &= this.CodigoPapel == item.CodigoPapel
    if (this.CodigoTipoNegociacao) aparece &= this.CodigoTipoNegociacao == item.CodigoTipoNegociacao

    return aparece
})

console.log(resultado)

No exemplo eu inicio a condição para aparecer na lista como true. Caso CodigoPapel ou CodigoTipoNegociacao não seja um valor falsy (como uma string vazia), a comparação será feita, e o resultado é atribuído à aparece.

Utilizando o operador &= você pode realizar a comparação lógica and durante a atribuição, dessa forma, mesmo que o resultado da comparação seja true, se aparece for false, ele continuará como false, pois false && true é false.

O mesmo também poderia ser obtido utilizando o operador ternário de forma mais direta:

const lista = [{"CodigoPapel":90,"NomeEmpresa":"IRBR1","CodigoTipoNegociacao":77},{"CodigoPapel":90,"NomeEmpresa":"ARGX4","CodigoTipoNegociacao":3},{"CodigoPapel":12,"NomeEmpresa":"Petrobras","CodigoTipoNegociacao":3}]

this.CodigoTipoNegociacao = '3'
this.CodigoPapel = ''

const resultado = lista.filter(item => 
    (this.CodigoPapel ? this.CodigoPapel == item.CodigoPapel : true) &&
    (this.CodigoTipoNegociacao ? this.CodigoTipoNegociacao == item.CodigoTipoNegociacao: true)
)

console.log(resultado)

Nessa comparação, se CodigoTipoNegociacao ou CodigoTipoNegociacao estiverem vazias, você simplesmente resulta a comparação em true, pois uma string vazia significa que o item deve aparecer.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .