@livelybone/vue-table
pkg.module supported, which means that you can apply tree-shaking in you project
A vue table component, support width change.
Prop heads has changed since 2.0.0. Install v1.8.0 if you want use the old config of heads
repository
https://github.com/livelybone/vue-table.git
Demo
https://livelybone.github.io/vue/vue-table/
Installation
npm i -S @livelybone/vue-tableRegister
// import all
import * as VueTable from '@livelybone/vue-table';
const {TableBase,TableExtend} = VueTable
// Global register
Vue.component('VueTable', TableBase);
Vue.component('VueTable', TableExtend);
// Local register
new Vue({
components:{TableBase,TableExtend}
})Use in html, see what your can use in CDN: unpkg
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/vue-table/lib/umd/<--module-->.js"></script>Example
See: example
Slots
th slot, slotName:
th-{{headKey}}
td slot, slotName:
td-{{dataKey}}-{{headKey}}
// The source code just like：
<template>
<table>
<tr>
<th v-for="(h, headKey) in heads">
...
<slot :name="'th-' + headKey"></slot>
</th>
</tr>
<tr v-for="(d, dataKey) in data">
<td v-for="(h, headKey) in heads">
...
<slot :name="'th-' + dataKey + '-' +headKey"></slot>
</td>
</tr>
</table>
</template>Props
Common
| Name | Type | DefaultValue | Description |
|---|---|---|---|
heads |
[Array, Object] |
[] |
List of head, see head
|
data |
[Array, Object] |
[] |
List of data |
headTrStyle |
Object |
none | |
trStyle |
Object |
none | |
evenTrStyle |
Object |
none | |
noHead |
Boolean |
false |
Set to true to hide thead |
/**
* @key { String } title
* @key { String } key
* @key { Number } width, init width of td, only works in TableExtend component
* @key { Object } style, init style of th or td, width property do not works in TableExtend component
* @key { Object } tdStyle, init style of td, width property do not works in TableExtend component, priority than `style`
* @key { Function } formatter
* @key { Function } headFormatter
* */
const head = {
title,
key,
width,
style,
tdStyle,
formatter,
headFormatter,
}TableExtend
| Name | Type | DefaultValue | Description |
|---|---|---|---|
scrollbarProps |
Object |
{isMobile: false, maxHeight: '1000vh'} |
Props of module @livelybone/vue-scrollbar-live |
Events
| Name | EmittedData | Description |
|---|---|---|
clickTh |
clickData |
|
clickTr |
clickData |
|
clickTd |
clickData |
const clickData={
ev: MouseEvent,
th, // index,
tr, // index,
td, // index,
}style
For building style, you can use the css or scss file in lib directory.
// scss
import 'node_modules/@livelybone/vue-table/lib/css/index.scss'
// css
import 'node_modules/@livelybone/vue-table/lib/css/index.css'Or
// scss
@import 'node_modules/@livelybone/vue-table/lib/css/index.scss';
// css
@import 'node_modules/@livelybone/vue-table/lib/css/index.css';Or, you can build your custom style by copying and editing index.scss
Especially, You can rewrite the style of TableExtend by flex layout
QA
- Error
Error: spawn node-sass ENOENT
You may need install node-sass globally,
npm i -g node-sass