npm install ele-easy-table -S
import 'ele-easy-table'
<ele-easy-table :form="form" :table="table" :formData.sync="formData" @getList="handleSearch"></ele-easy-table>
Veja o código-fonte da demonstração para obter detalhes
Depende do element-ui, seu projeto deve instalar o element-ui
Versão Element-ui usada pelo código-fonte
"element-ui": "^2.4.5"
propriedade | ilustrar | tipo | valor padrão |
---|---|---|---|
forma | Área de condição de consulta de tabela | Objeto | {} |
mesa | Área de exibição da mesa | Objeto | {} |
formData.sync | campos de consulta de formulário | Objeto | {} |
paginação | Se deve exibir a área de paginação | [Booleano, Objeto] | verdadeiro |
outros atributos | propriedades nativas da tabela el | Consulte as propriedades nativas da tabela el | - |
propriedade | ilustrar | tipo | valor padrão | Observação |
---|---|---|---|---|
aula | Configuração de estilo de área de condição de consulta de tabela | Objeto | - | - |
estilo | Configuração de estilo embutido da área de condição de consulta de tabela | Objeto | - | - |
dobraNum | A tabela é recolhida quando há mais do que muitas condições de consulta | Número | - | Sem este parâmetro, todos serão exibidos |
lista | Lista de condições de consulta de tabela | Variedade | - | Veja o código-fonte da demonstração para obter detalhes |
propriedade | ilustrar | tipo | valor padrão | Observação |
---|---|---|---|---|
lista | Lista de dados da tabela | Variedade | - | - |
colunas | Lista de cabeçalhos de tabela | Variedade | - | Veja o código-fonte da demonstração para obter detalhes |
está carregando | Se deve exibir a animação de carregamento da tabela | Booleano | - | |
showIndex | Se deve exibir a coluna do número de série | Booleano | verdadeiro | |
indexFixed | Se deve corrigir a coluna do número de série | Booleano | falso | |
indexLabel | Personalize o texto do cabeçalho da lista de números de série | Corda | número de série | |
seleção | Formulário de configuração de seleção múltipla | Objeto | {} |
propriedade | ilustrar | tipo | valor padrão | Observação |
---|---|---|---|---|
configuração | Formar múltiplas propriedades de seleção | Objeto | - | - |
atributo nativo el-pagination
Executado quando o número da página é alterado ou o número exibido em cada página muda, os dados são obtidos e atribuídos a table.list para atualizar a lista.
eventos nativos da tabela el, por exemplo: @selection-change="handleSelectionChange" Consulte o código-fonte da demonstração para obter detalhes
evento | ilustrar | parâmetro |
---|---|---|
identificadorExpandir | Evento de retorno de chamada após dobramento condicional | éExpandir |
A tabela tem um novo overflow de estilo embutido: visível para implementar o layout fixo do cabeçalho da tabela, basta adicionar o seguinte estilo;
Nota: Se for um estilo com escopo definido, você precisará usar o operador >>> (consulte o escopo CSS do documento para obter detalhes)
/* 全局样式 */
. el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}
/* scoped 局部样式 */
. ele-easy-table-demo > > > . el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}
Veja o código-fonte da demonstração para obter detalhes
Nota: Não pode ser usado com fixação de coluna ao mesmo tempo. Para usá-lo ao mesmo tempo, você pode usar o atributo da tabela nativa do elemento para definir a altura da tabela.