0

Estou com um problema que é o seguinte:

Estou usando o Materialize CSS, e Vue Js. Eu tenho uma tabela com cadastros, e em cada cadastro tem um checkbox ao lado para poder realizar alguma ação com este cadastro, como enviar notificação por e-mail, etc. E eu também posso marcar todos os itens de uma vez só, e funciona tudo conforme o previsto.

O problema é que quando é listado mais de 500 cadastros, o checkbox começa a gerar engasgos no navegador, e quando esse número ultrapassa os 1500 cadastros, o site simplesmente para de responder.

Uso um Intel i5 de 5º geração, 8gb de ram e SSD. Imagino que isso não é engasgo por parte do meu hardware.

Gostaria de saber se tem como otimizar esse checkbox do Materialize, ou desativar as animações de transição, pois quando tem muitos itens listados na tela e na hora de selecionar todo de uma vez, a animação buga, e deixa a aplicação muuuuito lenta.

Segue um trecho de como o checkbox está:

<label>
  <input type="checkbox" v-model="movconta.marcado" @click="marcaItem(movconta, val)" />
  <span></span>
</label>
3
  • qual versão do Materialize vc está usando?
    – hugocsl
    6/08/2018 às 22:15
  • 1.0.0-rc.2, acredito que seja a última versão
    – Otavio
    7/08/2018 às 11:36
  • 1
    Se vc está achando que é por causa do CSS do chackbox, basta vc fazer um teste rápido e dar display:none nos :before e :after do span dentro label do checkbox, e nessa classe coloca assim. [type="checkbox"]:not(:checked), [type="checkbox"]:checked { posintion:initial; opacity:1;} isso vai fazer o checkbox meio que voltar ao estado original e vc pode testar sem os estilos do Materialize. Se preferir pode apar o Span de uma vez só pra testar mesmo, mas ai o chack box fica sem o texto, seria apenas para teste de performance. Se não resolver verifique no console do browser se tem algum erro
    – hugocsl
    7/08/2018 às 12:04

0

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

Pesquise outras perguntas com a tag .