Ao desenvolver interfaces complexas com o framework Vue.js utilizando a biblioteca iView (View UI), o componente de Tabela é frequentemente utilizado para exibir dados. Uma necessidade comum é transformar uma célula estática em um campo editável (input) dinamicamente. Isso é realizado através da função render, que permite manipular o Virtual DOM de forma programática.

Estrutura de uma Tabela Editável

Para criar o efeito de edição, utilizamos uma propriedade de controle dentro do objeto de dados (ex: editando). Quando o estado dessa propriedade muda, a função render alterna a exibição entre um elemento de texto e um componente de entrada.

<template>
  <div class="container-tabela">
    <Table border :columns="colunasConfig" :data="listaFuncionarios"></Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colunasConfig: [
        {
          title: 'Nome do Colaborador',
          key: 'nome'
        },
        {
          title: 'Idade',
          key: 'idade',
          render: (h, params) => {
            // Verifica se a linha atual está em modo de edição
            if (params.row.editando) {
              return h('input', {
                domProps: {
                  value: params.row.idade
                },
                on: {
                  input: (event) => {
                    params.row.idade = event.target.value;
                  }
                },
                // Exemplo de aplicação de estilo inline no input
                style: {
                  width: '100%',
                  borderRadius: '4px',
                  border: '1px solid #dcdee2',
                  padding: '4px'
                }
              });
            } else {
              return h('div', params.row.idade);
            }
          }
        },
        {
          title: 'Ações',
          key: 'acao',
          render: (h, params) => {
            return h('Button', {
              props: {
                type: params.row.editando ? 'success' : 'primary',
                size: 'small'
              },
              on: {
                click: () => {
                  if (params.row.editando) {
                    this.confirmarEdicao(params.row);
                  } else {
                    this.ativarModoEdicao(params.row);
                  }
                }
              }
            }, params.row.editando ? 'Salvar' : 'Editar');
          }
        }
      ],
      listaFuncionarios: [
        { nome: 'Carlos Silva', idade: 30, editando: false },
        { nome: 'Ana Souza', idade: 25, editando: false }
      ]
    };
  },
  methods: {
    ativarModoEdicao(row) {
      this.$set(row, 'editando', true);
    },
    confirmarEdicao(row) {
      this.$set(row, 'editando', false);
      // Aqui pode ser inserida a lógica para persistir os dados no servidor
    }
  }
};
</script>

Customização de Estilos na Função Render

Diferente do template HTML padrão, na função render do iView, a estilização deve ser passada como um objeto dentro do nó de configuração do elemento. Existem duas abordagens principais para definir o visual dos elementos gerados:

1. Utilizando a Propriedade Style

A propriedade style recebe um objeto onde as chaves são os nomes das prporiedades CSS em formato camelCase. Esta abrodagem é ideal para estilos dinâmicos ou específicos que não se repetem em outros lugares da aplicação.

render: (h, params) => {
  return h('span', {
    style: {
      color: '#2d8cf0',
      fontSize: '14px',
      fontWeight: 'bold',
      cursor: 'pointer',
      marginRight: '8px'
    }
  }, 'Visualizar Detalhes');
}

2. Utilziando a Propriedade Class

Para manter o código mais limpo e reaproveitar classes CSS globais ou do componente, utiliza-se a chave class. Ela pode aceitar uma string, um array ou um objeto (para classes condicionais).

render: (h, params) => {
  return h('div', {
    class: {
      'texto-destaque': true,
      'ativo': params.row.status === 'ativo'
    }
  }, params.row.status);
}

Ao trabalhar com inputs dentro da tabela, a estilização correta garante que o layout não sofra quebras bruscas quando a célula alterna entre o modo de leitura e o modo de escrita, proporcionando uma experiência de usuário mais fluida.