vue-z-table

How to use

플러그인 등록

``js
import Vue from 'vue'
import zTable from 'vue-z-table'

Vue.use(zTable)
`

내장 컴포넌트 사용

`js
import { CheckboxHeader, Checkbox, ColumnHeader, Tooltip } from 'vue-z-table'
`

options

`html



`

column options

`js
import { Tooltip } from 'vue-z-table'
import SomeHeaderComponent from '~/SomeHeaderComponent'
import SomeDataComponent from '~/SomeDataComponent'
import SomeTooltipComponent from '~/SomeTooltipComponent'

const columns = [
{
field: '', // {String} - 머리 열의 고유 이름 (필수 속성)
title: '', // {String} - 머리 열의 표시 이름
width: 'auto', // {Number} - 'px'단위로 변환 || {String} - 'auto'
resizable: true, // {Boolean} - 머리 열 가로 너비 조절 여부
headerComponent: null, // {Component} - 머리 열에서 사용할 Vue 컴포넌트
component: null, // {Component} - 일반 열에서 사용할 Vue 컴포넌트
tooltipComponent: Tooltip, // {Component} - 툴팁으로 사용할 Vue 컴포넌트, 지정하지 않으면 내장 컴포넌트(Tooltip) 사용
tooltip: '' // {String} - 툴팁 메시지, HTML 사용 가능
},
{
field: 'title',
title: 'My Title~',
width: 230,
resizable: false,
headerComponent: SomeHeaderComponent,
component: SomeDataComponent,
tooltipComponent: SomeTooltipComponent,
tooltip: 'This is Tooltip!'
}
{
// ...
}
]
`

component options for column

$3

`html

`

$3

`html

`

$3

`html

``