vue jsx table
1.0.0
Exemplo de documentação
Este componente é baseado no desenvolvimento secundário da tabela de elementos e é baseado em negócios reais. Ele encapsula funções comumente usadas, gera tabelas por meio de configuração e implementa itens de expansão de cabeçalho de vários níveis , funções de cabeçalho personalizadas , etc.
Element-ui precisa ser introduzido no projeto antes do uso
npm i vue - jsx - table
import 'vue-jsx-table/dist/vue-jsx-table.css'
import vueJsxTable from 'vue-jsx-table'
Vue . use ( vueJsxTable ) <!-- 引入样式 -->
< link
rel = "stylesheet"
href = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.css"
/>
< ! -- 引入组件库 -- >
< script src = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.umd.min.js" > </ script > As opções de colunas e tableData são necessárias para configuração da tabela.
< vue-jsx-table
: columns = "columns"
: tableData = "tableData"
border
@ selection - change = "selectionChange"
: total = "100"
>
< / vue-jsx-table >
data() {
return {
columns : [
{
type : 'selection' ,
fixed : 'left' ,
selectable : this . rowSelectableHandle ,
} ,
{
label : '年龄' ,
prop : 'age' ,
width : 300 ,
sortable : true ,
} ,
{
label : '学校' ,
prop : 'school' ,
width : 200 ,
} ,
{
label : '学费' ,
prop : 'fee' ,
width : 200 ,
} ,
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} ,
] ,
tableData : [ ]
} ;
} ,Definir filhos para a coluna pode renderizar o cabeçalho do grupo.
{
label : '多级表头' ,
children : [
{
label : '年级' ,
prop : 'grade' ,
width : 120 ,
} ,
{
label : '班级' ,
prop : 'class' ,
} ,
] ,
} , Defina opções de renderização para coluna, Function(row, column, $index)
{
label : 'render' ,
prop : 'render' ,
width : 200 ,
render : ( row , column , $index ) => {
return (
< div onClick = { ( ) => this . cellClick ( row , column , $index ) } >
测试render
</ div >
) ;
} ,
} , Você só precisa definir type:expand para o item de configuração da coluna. O conteúdo expandido pode usar slot ou renderização. Se o slot e a renderização forem configurados ao mesmo tempo, o slot será ignorado.
{
type : 'expand' ,
slot : 'expand' ,
} , Você só precisa definir solt:'' para o item de configuração da coluna e slot é o nome do slot.
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} , Você só precisa definir renderHeader para o item de configuração da coluna. renderHeader é a configuração nativa do element-ui (Oficialmente, não é recomendado usar a função render-header na coluna. É recomendado usar slots!! Haverá um prompt no console, embaraçoso). Você também pode usar slots configurando o item slotHeader. que o nome do slot não pode ser repetido Definir A configuração do slot foi definida na declaração do modelo.
{
label : '自定义表头' ,
prop : 'name' ,
width : 120 ,
sortable : true ,
renderHeader : ( column , scope ) => {
console . log ( 'scope' , scope ) ;
return < span class = "cell-header-red-star" > { column . label } </ span > ;
} ,
} , {
label : '姓名' ,
prop : 'name' ,
slotHeader : 'slotHeader' ,
} ,
<!-- 插槽表头 -->
< template v-slot : slotHeader = "{ column }" >
<!-- {{ scope.column.label }} -->
< span >插槽表头： { { column . label } } </ span >
</ template > < vue-jsx-table
@ page-change = "pageChangeHandle"
: currentPage . sync = "paginationParams.pageNo"
: total = "100"
>
</ vue-jsx-table >
pageChangeHandle ( val ) {
this . paginationParams . pageNo = val . currentPage ;
this . paginationParams . pageSize = val . pageSize ;
} , Através do slot solt, você também pode usar a função render para renderizar componentes
< template v-slot : edit = "{ row }" >
< el-input v-model = "row.name" > </ el-input >
</ template >Todos os atributos da tabela são implementados por meio de v-bind="$attrs", atributos de tabela adicionais:
| parâmetro | ilustrar | tipo | valor padrão |
|---|---|---|---|
| colunas | colunas da tabela | Variedade | [] |
| colunasKeyName | A chave da coluna Se você precisar usar o evento filter-change, você precisa deste atributo para identificar em qual coluna está a condição do filtro (chave-coluna dos Atributos da coluna-tabela). | corda | - |
| alinhar | Alinhamento | Corda | esquerda |
| mostrarPaginação | Se deve exibir controles de paginação | Booleano | verdadeiro |
| página atual | A página atual do controle de paginação atual | Número | 1 |
| tamanhos de página | pageSizes de controles de paginação | Variedade | [10, 20, 30, 50] |
| tamanho da página | pageSize do controle de paginação | Variedade | [] |
| layout | layout do controle de paginação | Corda | 'tamanhos, anterior, pager, próximo, total' |
| total | total de controle de paginação | Número | 0 |
| estilo de paginação | O estilo do controle de paginação | Objeto | - |
| showOverflowTooltip | Exibir a dica de ferramenta quando o conteúdo for muito longo e estiver oculto. Se a coluna não for configurada separadamente com showOverflowTooltip, use este atributo. | Booleano | verdadeiro |
| showTableSetting | Exibir configurações da tabela | Booleano | falso |
| ocultar colunas | Nome da coluna e do rótulo que precisa ser ocultado Em alguns cenários, as colunas ocultas precisam ser exibidas com base em algumas condições. | Variedade | [] |
| classe personalizada | Classe de estilo personalizado | Variedade | ['vue-jsx-table-wrapper'] |
Todos os eventos de tabela são implementados por meio de v-on="$listeners", eventos de tabela adicionais:
| parâmetro | ilustrar | tipo | valor padrão |
|---|---|---|---|
| mudança de tamanho | Este evento será acionado por alterações na alteração de página e na alteração atual. Ele é adicionado para facilitar as alterações de paginação. | Função | 'function({pageSize: 10, página atual: 1,}) {}' |
| mudança de tamanho | Disparado quando pageSize muda | - | - |
| mudança atual | Disparado quando currentPage é alterado | - | - |
| parâmetro | ilustrar | tipo | valor padrão |
|---|---|---|---|
| adereço | O nome do campo correspondente ao conteúdo da coluna | corda | - |
| slot | O nome do slot da coluna (observe que se a tabela estiver aninhada, o nome do slot não poderá ser repetido, escopo do slot ({ row, $index })) | corda | - |
| rótulo | Título exibido | corda | - |
| largura | Largura da coluna correspondente | Número | - |
| showOverflowTooltip | Mostrar dica quando o conteúdo é muito longo e está oculto | Booleano | - |
| fixo | Quer a coluna esteja fixada à esquerda ou à direita (verdadeiro, esquerdo, direito), verdadeiro significa fixado à esquerda | string, booleano | - |
| renderizar | função de renderização jsx | função | renderizar(linha,coluna,$índice) |
| tipo | seleção/indexar/expandir | corda | - |
| renderHeader | Função usada para cabeçalho da tabela, título da coluna Renderização da área do rótulo | Função (coluna, escopo}), coluna é o item de configuração e escopo é o escopo do componente nativo. (Este atributo não é um parâmetro nativo) | - |
| célularedstar | Se deve colocar um sinal de estrela vermelha antes do texto do cabeçalho | Booleano | falso |
| classificável | Se a coluna correspondente pode ser classificada. Se definido como 'personalizado', significa que o usuário deseja classificar remotamente e precisa ouvir o evento de alteração de classificação da tabela. | booleano, string (verdadeiro, falso, 'personalizado') | falso |
| formatador | Usado para formatar conteúdo (atributo original element-ui) | Função (linha, coluna, cellValue, índice) | - |
| selecionável | É válido apenas para colunas com type=selection O tipo é Function. O valor de retorno de Function é usado para determinar se o CheckBox desta linha pode ser verificado. | Função (linha, índice) | - |
| showHeaderTooltip | Se as informações do prompt de cópia são exibidas quando o mouse é movido para o cabeçalho da tabela | Booleano | - |
| headerTooltipText | O cabeçalho exibe o conteúdo das informações da cópia | Corda | - |
