Adicionar configurações de campo à tabela React Ant-Design | Equipe técnica do JD Cloud

Dos dados à aplicação de grandes modelos, em 25 de novembro, foi realizada a Conferência Hangzhou Yuanchuang para compartilhar dicas de desenvolvimento.

Vários projetos recentes frequentemente encontraram a necessidade de adicionar uma função de configuração de campo de formulário personalizado ao formulário. Ou seja, os usuários podem controlar quais colunas precisam ser exibidas.

Ele foi implementado em vários projetos e os requisitos de cada projeto são um pouco diferentes. Ele foi iterado várias vezes, então reservei um tempo para encapsular essa função em um componente: @silverage/table-custom para integrar essas diferenças . é fácil de usar e manter no futuro. Ao mesmo tempo, também é conveniente para pessoas que precisam usar essa função.

O seguinte descreve a instalação e o uso de

Instalar

npm i @silverage/table-custom --save
yarn add @silverage/table-custom
pnpm add @silverage/table-custom

Os componentes ant-designsão desenvolvidos em cima disso, então você também precisa instalá-los antd. Ele é usado para persistência de dados use-local-storage-statee precisa ser instalado. Além disso, reacttambém é dependência de pares.

usar

<Table />O componente é muito simples de usar, basta substituir o original e o outro <TableCustom />. Compatível com todos os atributos da tabela antd.

import { TableCustom } from '@silverage/table-custom'

<TableCustom columns={columns} dataSource={dataSource} />

Quando o mouse passa sobre a mesa, um ícone de engrenagem aparecerá no canto superior direito da mesa. Clique para entrar na interface de configuração. As colunas podem ser ocultadas/mostradas marcando-as.

Suporta cabeçalhos de linha única e cabeçalhos mesclados de camada dupla.

Você pode notar que na captura de tela acima IDas colunas estão cinza, porque ao usar a empresa deseja que algumas colunas sejam corrigidas e não possam ser ocultadas. Isto pode ser conseguido definindo a coluna disableCustom: true.

const columns = [
    {
        title: `ID`,
        dataIndex: `id`,
        key: `id`,
        width: 100,
        fixed: 'left',
        disableCustom: true // here
    }
]

Além disso, se você quiser salvar as colunas modificadas, há duas maneiras: uma é persistir por meio do armazenamento local e a outra é fornecer uma interface por meio do backend. Diferentes projetos escolhem diferentes formas de implementá-lo, e vários projetos recentes utilizaram ambos.

O método localstorage é muito simples, você só precisa fornecer storageKeyatributos do componente.

<TableCustom
    storageKey="myKey"
    columns={columns}
    dataSource={dataSource}
/>

O modo de interface pode ser alcançado por meio savedColumnsde onChecklistChangecooperação.

const [savedColumns, setSavedColumns] = useState([])

<TableCustom
    columns={columns}
    dataSource={dataSource}
    savedColumns={savedColumns ?? []}
    onChecklistChange={async checkedList => {
        const res = await api.request()
        setSavedColumns(res?.data)
    }}
/>

Depois de usá-lo por um período de tempo, em alguns projetos, "ninguém além de você" achou que o ícone de engrenagem era muito obscuro e queria colocar um botão no formulário para controlá-lo, então adicionei os seguintes atributos, permitindo aos usuários controlar eles mesmos. Porque pode haver outros botões acima da tabela original.

const [visible, setVisible] = useState(false)
<Button onClick={() => setVisible(true)}>Open</Button>
<TableCustom
    columns={columns}
    dataSource={dataSource}
    openCustomModal={visible} // here
    onCustomModalClose={() => setVisible(false)} // and here
/>

Depois de algum tempo, para atender aos inevitáveis ​​requisitos de classificação de campos no futuro, uma função de classificação foi adicionada e apenas o campo classificável precisava ser definido.

<TableCustom
    columns={columns}
    dataSource={dataSource}
    sortable
/>

Basta arrastar o ícone atrás do campo com o mouse. Ele também suporta cabeçalhos de camada única e camada dupla!

Você também pode personalizar o estilo do ícone:

<TableCustom
    columns={columns}
    dataSource={dataSource}
    sortable
    sortHandler={<span>::</span>}
/>

---

Veja a documentação completa: https://github.com/yuhongda/table-custom

Aproveitar

Autor: JD Retail Yu Hongda

Fonte: JD Cloud Developer Community Ziyuanqishuo Tech Por favor, indique a fonte ao reimprimir

O Alibaba Cloud sofreu uma falha grave, afetando todos os produtos (foi restaurado). O sistema operacional russo Aurora OS 5.0, uma nova UI, foi revelado no Tumblr. Muitas empresas de Internet recrutaram urgentemente programadores Hongmeng . .NET 8 é oficialmente GA, o mais recente Versão LTS Tempo UNIX Prestes a entrar na era de 1,7 bilhão (já entrou), a Xiaomi anunciou oficialmente que o Xiaomi Vela é totalmente de código aberto e o kernel subjacente é .NET 8 no NuttX Linux. O tamanho independente é reduzido em 50%. FFmpeg 6.1 " Heaviside" é lançado. Microsoft lança um novo "aplicativo do Windows"

{{o.nome}}

{{m.nome}}