Vue3+Ts combinado com ant-design+tailwindcss para obter uma renderização de dados de tabela complexos, incluindo visualização e envio de formulário

Recentemente, ao ler projetos de outras pessoas, me deparei com um lugar interessante, ou seja, o design de formigas renderiza um tipo complexo de tabela... Primeiro, vamos dar uma olhada na tabela padrão do exemplo oficial.

 A tabela padrão é exibir o conteúdo correspondente na posição do cabeçalho da tabela correspondente, e o código também é muito conciso.

<a-table :dataSource="dataSource" :columns="columns" />

Claro. Para atender às necessidades de desenvolvimento personalizado, também podemos usar a forma de slots para exibir o conteúdo desejado na coluna desejada.

Por exemplo, você deseja que a primeira coluna da tabela exiba o índice.

const colums = [
  {
    title: "序号",
    dataIndex: "index",
  },
  {
    title: "姓名",
    dataIndex: "name",
  },
  ...
  ...
]

    <a-table
      :columns="colums"
      :dataSource="newData"
    >
      <template #bodyCell="{ column, record, text, index }">
        <template v-if="column.dataIndex === 'index'">
          <span>
            {
   
   { index }}
          </span>
        </template>
      </template>
    </a-table>

Você pode controlá-lo para exibir o índice por meio de slots. Podemos também ser ousados ​​e tornar esta tabela mais complicada. Quão complicada ela é? Por favor, veja a figura abaixo.

 

Aqui está a página da lista: Na coluna de histórico educacional, clique em cada ícone pequeno para expandir as informações de histórico educacional correspondente. 

Clique no botão Adicionar para adicionar um novo dado, a página de edição é mostrada na figura:

 Este é um formulário baseado em lista, que geralmente é conveniente de usar ao enviar muitos dados.Na coluna de formação educacional, apenas os dados vazios das escolas primárias são exibidos por padrão.

Clique em Adicionar formação educacional, você pode continuar adicionando tipos de escola, aqui fiz um limite, só pode ser adicionado a universidades no máximo e não pode ser modificado, apenas esses quatro tipos, você também pode clicar no botão excluir para excluir o atual registro de antecedentes educacionais.

Existem dois botões na extrema direita de cada linha de registros, que servem para adicionar experiência de serviço e adicionar projetos premiados. Por exemplo, depois de clicar para adicionar experiência de emprego, uma nova tabela será adicionada sob o nome da escola para armazenar os dados de emprego adicionados. Você também pode clicar no botão excluir para excluir o registro de emprego atual. O mesmo vale para adicionar itens vencedores.

 

 

 Esta é uma renderização de uma tabela complexa, que implementa completamente a função desejada de acordo com os requisitos personalizados.Após inserir os dados básicos, clique em OK. Um novo dado que acabamos de editar é adicionado à página da lista.

 

 Claro. Muitas das funções aqui não são perfeitas o suficiente. Coloquei o código-fonte no final do artigo. Deixe-me compartilhar alguns problemas e precauções reais:

1. Ao percorrer dados com v-for, é melhor percorrer a matriz em vez do objeto, caso contrário, haverá erros inesperados.
   1. Os objetos também podem ser percorridos usando v-for, mas o índice percorrido dessa maneira é o nome do atributo do objeto, e o nome do atributo do objeto é do tipo string, mas v-for="(item,index) in data ":key="index ", seu índice é do tipo número, se envolver alguma operação relacionada ao índice, um erro será reportado.

   2. let data = {
      
      A:{},
      B:{},
      C:{}
      }

      Um objeto semelhante a uma matriz é definido como acima e é percorrido usando v-for. O índice é A, B e C, e eles são do tipo string

      <div v-for="(item,index) in data" :key="index">
          <span v-if="index==='A'">aaa</span>
          <span v-if="index==='B'">bbb</span>
          <span v-if="index==='C'">ccc</span>
      </div>

      Então, ao usar o índice para julgar a operação, a operação relatará um erro. O erro provavelmente é: os dados do tipo string não podem ser comparados com o tipo numérico. Tentei vários métodos, como == , toString, etc. , mas ainda não funciona, porque o próprio índice é um tipo de número.

2. É muito importante definir uma chave para cada registro, também é bom adicionar, deletar, modificar e conferir posteriormente, inclusive controlando individualmente cada registro da página, como expandir e recolher.
3. Para validação de formulário, cada item de formulário pode vincular apenas um dado de validação e não pode ter mais de dois itens de entrada

，

Como o id do registro é codificado e não gerado com um número aleatório, ele precisa ser melhorado posteriormente.

https://gitee.com/liu-yunshun/vue3--ts-learning-demo.git