Para exibir o logotipo de uma marca de forma personalizada em uma lista, é possível utilizar o componente el-table-column do Element UI com um scoped slot. O exemplo a seguir demonstra como renderizar uma imagem com fallback visual caso o URL do logotipo seja inválido ou ausente:

<template #default="{ row }">
  <img 
    :src="row.logo" 
    alt="Logo da marca"
    style="max-width: 50px; max-height: 50px; object-fit: contain;"
    @error="$event.target.src = '/images/default-logo.png'"
  />
</template>

O atributo @error garante que, se a imagem falhar ao carregar, um logotipo padrão será exibido. O uso de object-fit: contain preserva as proporções da imagem dentro do contêiner.

Registro Seletivo de Componentes do Element UI

Para otiimzar o tamanho do bundle final, apenas os componentes realmente utilizados devem ser registrados globalmente no Vue. Abaixo está um exemplo de importação e registro modular:

import Vue from 'vue';
import {
  Table,
  TableColumn,
  Form,
  FormItem,
  Input,
  Button,
  Message,
  MessageBox
} from 'element-ui';

[
  Table, TableColumn, Form, FormItem, Input, Button
].forEach(comp => Vue.use(comp));

Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$message = Message;

Essa abordagem reduz significativamente o tamanho do pacote, especialmente em aplicações grandes onnde nem todos os componantes do Element UI são necessários.

Regras Personalizadas de Validação de Formulário

No componente de cadastro/atualização de marcas (brand-add-or-update.vue), as regras de validação foram estendidas para garantir integridade dos dados. As validações personalizadas para os campos firstLetter e sort são definidas da seguinte forma:

validationRules: {
  name: [{ required: true, message: 'Nome da marca é obrigatório', trigger: 'blur' }],
  logo: [{ required: true, message: 'URL do logotipo é obrigatória', trigger: 'blur' }],
  description: [{ required: true, message: 'Descrição é obrigatória', trigger: 'blur' }],
  showStatus: [{ required: true, message: 'Status de exibição é obrigatório', trigger: 'blur' }],
  firstLetter: [{
    validator(rule, value, callback) {
      if (!value) {
        callback(new Error('A letra inicial é obrigatória'));
      } else if (!/^[A-Za-z]$/.test(value)) {
        callback(new Error('Deve ser uma única letra (A-Z ou a-z)'));
      } else {
        callback();
      }
    },
    trigger: 'blur'
  }],
  sortOrder: [{
    validator(rule, value, callback) {
      const num = Number(value);
      if (value === '' || value == null) {
        callback(new Error('Ordem de exibição é obrigatória'));
      } else if (!Number.isInteger(num) || num < 0) {
        callback(new Error('Deve ser um número inteiro não negativo'));
      } else {
        callback();
      }
    },
    trigger: 'blur'
  }]
}

A validação do campo firstLetter assegura que o valor inserido seja exatamente uma letra do alfabeto latino, maiúscula ou minúscula. Já o campo sortOrder exige um inteiro maior ou igual a zero, convertendo implicitamente strings numéricas válidas antes da verificação.

É fundamental ressaltar que, embora a validação no frontend melhore a experiência do usuário com feedback imediato, todas as entradas devem ser revalidadas no backend para garantir segurança e consistência dos dados. A ausência de validação server-side pode expor a aplicação a injeções maliciosas ou corrupção de dados.