v-table

Vue table Component

Devlopment

yarn

yarn start

Example

http://localhost:8000/example/default.html

Feature

• Support IE9+, Chrome, Firefox

npm config set @cloud-sn:registry http://snpm.cnsuning.com

yarn add @cloud-sn/v-pagination

Usage

import Vue from 'vue';
import Pagination from '@cloud-sn/v-table';

API

Props

| 参数名 | 描述 | 类型 | 默认 | | --------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------- | | prefix-cls | 类名前缀 | String | v-table | | value | 值 | Array | | | use-fixed-header | 是否固定头部 | Boolean | false | | columns | header 列名 | Array | | | on-row | 自定义数据行每行属性 | Function(record,rowIdx)=>{} | | | on-header-row | 自定义 header 每行属性 | Function(record, rowIdx) | | hide-header | 是否隐藏 header | Boolean | false | | title | 表格标题 | String | | | footer | 表格 footer | String | | | empty-text | 数据为空时提示文案 | String | '暂无数据' | | scroll | 设置表格左右滚动, x:true 或 number, y:number | Object | scroll:{x:false, y:false} | | row-key | 设置主键字段 | Function|String | key | | indent-size | 树形表格时每级的缩进距离 | Number|String | 15 | | child-col-name | 树形表格时子集键名 | String | children | | expand-icon-as-cell | expandIcon 是否单独渲染 cell | Boolean | false | | expand-row-by-click | 是否点击行展开 | Boolean | false | | expand-icon-col-index | 树形表格展示 expandIcon 的列序号 | Number|String | 0 | | expanded-row-render | 渲染展开行内容 | Function(record, rowIdx, indent)=>VNode | | | | expanded-row-keys | 展开行的 keys, 与每行数据中的通过 row-key 字段设置的键名对应,默认为 key | Array | | | expand-all-rows | 是否展开所有行 | Boolean | false | | draggable | 表格是否可拖拽 | Boolean | false | | allowDrag | 当前行是否可拖拽 | Function: (record) => Boolean | null | | allowDrop | 当前行是否可释放 | Function: (record, dragRecord, dragPosition, isExpanded) =>Boolean | null | | minResizeColWidth | 单元格拖拽时的最小宽度 | Number | String | 50 |

Column API

| 参数名 | 描述 | 类型 | 默认 | | ------------ | ------------------------------------------------------------------------ | ----------------------------------------------------- | ---- | | title | header 列名 | String | | | className | 自定义 header class | String|Object|Array | | | width | 列宽 | Number | | | align | 对齐方式(center| left|right) | String | | | dataIndex | 列数据索引,对应数据中的键名 | String | | | onHeaderCell | 自定义 渲染 header cell 属性 ,支持自定义事件{on:{click(){}}} | Function(column, rowIdx,colIdx)=>Object | | | onCell | 自定义渲染 cell 属性 ,支持自定义属性和事件 | Function(record, rowIdx, column, colIdx)=>Object | | | cellRender | 数据 cell 内容渲染,支持自定义属性和事件 ,class 字段名请用 className 代替 | Function(text, record, rowIdx,column, colIdx)=>Object | | | resizable | 是否可拖拽调整宽度 | Boolean | |

Slots

| 名称 | 描述 | | ------ | ------------------------------ | | title | 表格 标题 slot,支持 slot-scope | | empty | 表格数据为空时 slot | | footer | footer slot | | expand | 展开行 slot,只支持 slot-scope |

Events

| 事件名 | 描述 | 类型 | | ------------------- | -------------------- | -------------------------------------------------------------------------------------------------- | | expanded-row-change | 展开/收缩行时触发 | Function(expandRows) | | expand | 展开/收缩行时触发 | Function(expanded, record) | | dragstart | 拖拽开始时触发 | Function({ event, dragKey, dragRecord }) | | dragenter | 拖拽进入时触发 | Function({ event, isExpandRow, record, key, dragKey, dragRecord }) | | dragleave | 拖拽离开时触发 | Function( event, isExpandRow, record, key, dragKey, dragRecord }) | | dragend | 拖拽结束触发 | Function({ event, dragKey, dragRecord }) | | dragover | 拖拽悬浮时触发 | Function({ event, position, isExpandRow, record, key, dragKey, dragRecord }) | | drop | 拖拽释放时触发 | Function({ event, getValue, record, key, dragKey, dragRecord, position, isExpandRow, isExpanded }) | | column-width-resize | 单元格宽度调整时触发 | Function(newWidth, oldWidth, column, event) |