vue-smart-grid v1.10.3

vue-smart-grid

基于Vue2开发的表格组件

使用

import VueSmartGrid from 'vue-smart-grid'
import 'vue-smart-grid/dist/default.css'

Vue.use(VueSmartGrid)

默认基于spring-data的分页参数，可以在install时传入options自定义data-config

Vue.use(VueSmartGrid, { dataNode: 'content', // 分页时的存放数据数组的名称 size: 'size', // 每页显示多少条数据 默认10，20，50 totalPages: 'totalPages', // 总页数 totalElements: 'totalElements', // 总数量 number: 'number' // 当前第几页，从0开始 })

## 例子

// App.vue

  <smart-grid-pagination>
    <template scope="props">
      <Page :handler="props"/>
    </template>
  </smart-grid-pagination>
  <div slot="empty">没有数据...</div>
</smart-grid>
<button type="button" @click="handleReload">reload</button>
<button type="button" @click="handleCheckedRows">checked rows</button>
<button type="button" @click="handleResetSortStatus">reset sort status</button>

// Page.vue

## Smart-grid API
### data
支持两种格式，一种是普通数组格式，一种是带分页格式，上面例子为分页格式，数组格式如下：

data: { { name: '张三', sex: '男', age: 33 }, { name: '李四', sex: '女', age: 23 }, { name: '王五', sex: '女', age: 17 } }

### hoverable:Boolean
是否一个悬停，默认为true

### selectable:Boolean
是否可选择，默认为true

### data-config:Object
数据节点的配置，会覆盖root的配置 

### seq:String
用户提升性能，避免更少的渲染，一般为"id"

### show-rows:Number
显示多少条，更多的通过显示更多显示

### inline-rows:Number
将row横向展示

### multiple:Boolean
是否为多选，默认为true

### show-pages:Number
分页默认展示的条数

### event-hub:Vue
触发vue-smart-gird事件时使用

### defaultDescDirection
默认第一次触发排序的顺序是desc

### border:String
表格样式，默认'xy'，可取值：'xy','x','y','none'
'xy':x与y都会有边栏
x与y同理

### loading:Boolean
是否显示加载动画，默认为false

### hidden-column:Boolean
是否隐藏表头，默认为false

### sizes:Array
分页条数，默认"[10, 20, 50, 60]"

## 事件
### size-change
改变条数时会出发
可用pagination-change事件代替

### page-change
改变页数时会出发
可用pagination-change事件代替

### pagination-change
改变页数或条数时都会出发

### sort-change
触发排序时触发

### dblclick
双击行时触发

### click
单击行时触发

### reload
重载（将会带当前的分页信息）

### select
选中、取消选中是会触发

### all-select
选中、取消全选时会触发

## Smart-grid-column API
### label:String
列的名称

### code:String
列的代码

### width:String
列的宽度

### align:String
对齐方式

### sort:Boolean
是否开启排序

### valueset:Object
代码集对象

### hidden
是否隐藏

## 方法
### getCheckedRows
获取当前选中的行

### resetSortStatus
重设排序为初始状态