Ao desenvolver aplicações Vue que requerem seleção de regiões hierárquicas, como províncias, cidades e distritos, o componante el-cascader do Element UI é uma solução eficiente. Este tutorial demonstra duas abordagens principais: utilizando a biblioteca element-china-area-data para dados geográficos da China, ou gerenciando um arquivo JavaScript local com os dados. Ambas as abordagens garantem uma interface interativa e responsiva.

Primeiro Método: Usando a Biblioteca element-china-area-data

Para começar, instale a versão adequada da biblioteca. A versão V6 é recomendada para sintaxe atualizada, enquanto a V5.0.2 requer documentação específica.

npm install element-china-area-data -S

Após a instalação, importe os dados necessários no seu componente Vue. Para uma seleção tripla de províncias, cidades e distritos em formato de texto puro, utilize pcaTextArr.

import { pcaTextArr } from "element-china-area-data";

No template Vue, utilize o componente el-cascader com propriedades como filterable para pesquisa e clearable para limpar a seleção. Vincule os dados usando v-model e defina um método para tratar mudanças.

<el-cascader
    style="width: 100%"
    filterable
    clearable
    :options="opcoesDados"
    v-model="regiaoSelecionada"
    @change="aoMudarRegiao">
</el-cascader>

No script do componente, defina as propriedades reativas. Os dados da biblioteca são atribuídos a uma variável, e a seleção é armazenada em um array.

data() {
  return {
    opcoesDados: pcaTextArr,
    regiaoSelecionada: []
  };
}

Implemente o método de tratamento de mudança. Este método recebe o array de seleção, permitindo processar os valores conforme necessário.

methods: {
  aoMudarRegiao(valores) {
    console.log("Regiões selecionadas:", valores);
    // Lógica adicional, como concatenar os valores em uma string
  }
}

Para repopular a seleção com dados existentes, por exemplo, de uma API, basta atribuir um array com os textos das regiões à variável vinculada.

this.regiaoSelecionada = ["Província", "Cidade", "Distrito"];

Segundo Método: Usando um Arquivo JavaScript Local

Se preferir evitar dependências externas ou tiver dados personalizados, crie um arquivo JavaScript contendo uma estrutura de dados hierárquica. Esta abordagem pode impactar o desempenho com grandes volumes de dados, então otimize conforme necessário.

Considere o arquivo regioes-dados.js com uma exportação padrão de um array de objetos, onde cada objeto enclui value, label e children para representar a hierarquia.

Importe o arquivo no componente Vue.

import dadosRegioes from './regioes-dados.js';

No template, o uso do el-cascador permanece similar, mas com os dados locais.

<el-cascader
    style="width: 100%"
    filterable
    clearable
    :options="listaRegioes"
    v-model="escolhaAtual"
    @change="processarSelecao">
</el-cascader>

Defina as propriedades reativas usando os dados importados.

data() {
  return {
    listaRegioes: dadosRegioes,
    escolhaAtual: []
  };
}

O método de tratamento pode ser implementado de forma similar, adaptando a lógica específica da aplicação.

methods: {
  processarSelecao(arrSelecionado) {
    // Exemplo: converter o array em uma string formatada
    const regiaoCompleta = arrSelecionado.join(', ');
    console.log("Região formatada:", regiaoCompleta);
  }
}