vue-table
a table component for vue2.0
demo
中文
vue-table
vue-table: The component encapsulates the daily commonly used functions, paging, selection, operation and fixed scroll around, and other functions, please see the specific effect demo。
The basic use
import vueTable from 'vue-table2'
<vue-table :tdata="tableData"
:tcolumns="tableColumns"
:showHandle="true"
:tdHeight="40"
v-on:clickItem="tableSelectItem">
<template slot="operations" scope="scope">
<span @click="edit(scope.item)">编辑</span>
<span @click="edit(scope.item)">删除</span>
<span @click="edit(scope.item)">禁用</span>
</template>
</vue-table>
/*
const columns1 = [
{
title: '机构编号',
key: 'number',
width: 85,
textAlign: 'left'
},
{
title: '机构名称',
key: 'name',
width: 292,
textAlign: 'left',
textLine: 2,
selectText: true
},
{
title: '类型',
key: 'type',
width: 180,
textAlign: 'center'
},
{
title: '状态',
key: 'brand',
width: 82,
textAlign: 'center'
}
]
*/
Please see the instructions below
columns config(columns)
name | default | require | describe |
---|---|---|---|
title | yes | The table header | |
key | yes | The key of data | |
width | yes | The width and the minimum width of the column | |
textLine | no | Specify that a list of the cell text overflow display ellipses | |
textAlign | left | no | cell text alignment: left(左对齐) center( 居中) right(右对齐) |
table config
name | type | default | require | describe |
---|---|---|---|---|
tdata | Array | yes | Render the form data | |
tcolumns | Array | yes | columns config | |
showSelect | Boolean | false | no | show left select box |
showHandle | Boolean | false | no | show right action box |
titleHeight | Number | 32 | no | table header hight |
tdHeight | Number | 50 | no | cell hight |
titleFixed | String | 'auto' | no | table head is fixed,default 'auto'(no fixed),'fixed'(fixed), ps:table header fixed should specify the scrollHight(scrollHight) |
scrollHight | Numer | 400 | no | The height of the scrolling content |
selectFixed | Boolean | false | no | the left side of the fixed |
handleFixed | Boolean | false | no | the right side of the fixed |
page | Object | no | page config,{totalPage: 50,maxSize: 5} (totalPage)Total number of pages ,(maxSize)show max page |
events
name | require | describe |
---|---|---|
clickItem | no | Click on each row trigger events |
changePage | no | he page number change when the trigger event |
selectCheck | no | select chebox trigger events |
slot describe
action template slot
<template slot="operations" scope="scope">
<span @click="edit(scope.item)">编辑</span>
<span @click="edit(scope.item)">删除</span>
<span @click="edit(scope.item)">禁用</span>
</template>
ps:If feel useful to you Please click a start, you support me is the greatest power