vue jsx table
1.0.0
Ejemplo de documentación
Este componente se basa en el desarrollo secundario de la tabla de elementos y se basa en negocios reales. Encapsula funciones de uso común, genera tablas a través de la configuración e implementa elementos de expansión de encabezados de varios niveles , funciones de encabezado personalizadas , etc.
Element-ui debe introducirse en el proyecto antes de su 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 > Las opciones de columnas y tableData son necesarias para la configuración de la tabla.
< 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 : [ ]
} ;
} ,Configurar los niños en la columna puede representar el encabezado del grupo.
{
label : '多级表头' ,
children : [
{
label : '年级' ,
prop : 'grade' ,
width : 120 ,
} ,
{
label : '班级' ,
prop : 'class' ,
} ,
] ,
} , Establecer opciones de representación para columna, Función (fila, columna, $ índice)
{
label : 'render' ,
prop : 'render' ,
width : 200 ,
render : ( row , column , $index ) => {
return (
< div onClick = { ( ) => this . cellClick ( row , column , $index ) } >
测试render
</ div >
) ;
} ,
} , Solo necesita configurar type:expand para el elemento de configuración de la columna. El contenido expandido puede usar slot o render. Si el slot y el render se configuran al mismo tiempo, el slot se ignorará.
{
type : 'expand' ,
slot : 'expand' ,
} , Solo necesita configurar solt:'' para el elemento de configuración de la columna, y slot es el nombre de la ranura.
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} , Solo necesita configurar renderHeader para el elemento de configuración de la columna. renderHeader es la configuración nativa de element-ui (Oficialmente, no se recomienda usar la función render-header en la columna. ¡Se recomienda usar ranuras! Habrá un mensaje en la consola, lo cual es vergonzoso). También puede usar ranuras configurando el elemento slotHeader. que el nombre de la ranura no se puede repetir. Definir La configuración de la ranura se ha definido en la declaración de la plantilla.
{
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 ;
} , A través de la ranura solt, también puede usar la función de renderizado para renderizar componentes.
< template v-slot : edit = "{ row }" >
< el-input v-model = "row.name" > </ el-input >
</ template >Todos los atributos de la tabla se implementan mediante v-bind="$attrs", atributos de tabla adicionales:
| parámetro | ilustrar | tipo | valor predeterminado |
|---|---|---|---|
| columnas | columnas de la tabla | Formación | [] |
| columnasNombreClave | La clave de la columna. Si necesita utilizar el evento de cambio de filtro, necesita este atributo para identificar qué columna es la condición del filtro (clave de columna de los atributos de la columna de tabla). | cadena | - |
| alinear | Alineación | Cadena | izquierda |
| mostrar paginación | Ya sea para mostrar controles de paginación | Booleano | verdadero |
| página actual | La página actual del control de paginación actual. | Número | 1 |
| tamaños de página | Tamaños de página de los controles de paginación. | Formación | [10, 20, 30, 50] |
| tamaño de página | tamaño de página del control de paginación | Formación | [] |
| disposición | diseño del control de paginación | Cadena | 'tamaños, anterior, buscapersonas, siguiente, total' |
| total | total de control de paginación | Número | 0 |
| Estilo de paginación | El estilo del control de paginación. | Objeto | - |
| mostrar información sobre herramientas de desbordamiento | Muestra la información sobre herramientas cuando el contenido es demasiado largo y está oculto. Si la columna no está configurada por separado con showOverflowTooltip, use este atributo. El valor predeterminado es verdadero. | Booleano | verdadero |
| mostrar configuración de tabla | Mostrar configuración de la tabla | Booleano | FALSO |
| ocultar columnas | Nombre de columna y etiqueta que deben ocultarse. En algunos escenarios, las columnas ocultas deben mostrarse según algunas condiciones. | Formación | [] |
| clase personalizada | Clase de estilo personalizado | Formación | ['vue-jsx-table-wrapper'] |
Todos los eventos de tabla se implementan a través de v-on="$listeners", eventos de tabla adicionales:
| parámetro | ilustrar | tipo | valor predeterminado |
|---|---|---|---|
| cambio de talla | Este evento se desencadenará por cambios en el cambio de página y el cambio actual. Se agrega para facilitar los cambios de paginación. | Función | 'función ({tamaño de página: 10, página actual: 1,}) {}' |
| cambio de talla | Se activa cuando cambia el tamaño de la página | - | - |
| cambio actual | Se activa cuando cambia la página actual | - | - |
| parámetro | ilustrar | tipo | valor predeterminado |
|---|---|---|---|
| apuntalar | El nombre del campo correspondiente al contenido de la columna. | cadena | - |
| ranura | El nombre de la ranura de la columna (tenga en cuenta que si la tabla está anidada, el nombre de la ranura no se puede repetir, alcance de la ranura ({ fila, $ índice })) | cadena | - |
| etiqueta | Título mostrado | cadena | - |
| ancho | Ancho de columna correspondiente | Número | - |
| mostrar información sobre herramientas de desbordamiento | Mostrar información sobre herramientas cuando el contenido es demasiado largo y está oculto | Booleano | - |
| fijado | Ya sea que la columna esté fijada a la izquierda o a la derecha (verdadero, izquierdo, derecho), verdadero significa fijada a la izquierda | cadena, booleano | - |
| prestar | función de renderizado jsx | función | renderizar(fila,columna,$índice) |
| tipo | selección/indice/expandir | cadena | - |
| renderEncabezado | Función utilizada para encabezado de tabla, título de columna Representación del área de etiqueta | Función (columna, alcance}), la columna es el elemento de configuración y el alcance es el alcance del componente nativo. (Este atributo no es un parámetro nativo) | - |
| estrellarojacelda | Si se debe colocar un signo de estrella roja antes del texto del encabezado | Booleano | FALSO |
| ordenable | Si la columna correspondiente se puede ordenar. Si se establece en "personalizado", significa que el usuario desea ordenar de forma remota y necesita escuchar el evento de cambio de clasificación de la tabla. | booleano, cadena (verdadero, falso, 'personalizado') | FALSO |
| formateador | Se utiliza para formatear contenido (atributo original element-ui) | Función (fila, columna, valor de celda, índice) | - |
| seleccionable | Solo es válido para columnas con tipo = selección. El tipo es Función. El valor de retorno de Función se utiliza para determinar si se puede marcar la casilla de verificación de esta fila. | Función (fila, índice) | - |
| mostrarHeaderTooltip | Si la información del mensaje de copia se muestra cuando se mueve el mouse al encabezado de la tabla | Booleano | - |
| encabezadoInformación sobre herramientasTexto | El encabezado muestra el contenido de la información de copia | Cadena | - |
