0.3.8 • Published 3 years ago

celtable v0.3.8

Weekly downloads
12
License
-
Repository
-
Last release
3 years ago

celtable

安装 依赖element-ui

npm i celtable -S
npm i element-ui -S

导入Vue

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import CUI,{CTable} from 'celtable'
import 'celtable/lib/ctable.css'
Vue.use(ElementUI);
Vue.use(CUI)

export components

CTable
  CTableColumn
  CTableColumns // column group 多层表头children

CMenu
  CMenuListItem

CTable

Table Attributes

其他属性及方法和elementUi相同，以下属性，方法为附加

参数说明类型可选值默认值
rowDrag行拖拽,依赖row-keyBoolean:----:false
columnDrag列拖拽Boolean:----:false
rowDropCopy行拖拽复制依赖rowDrag=true auto自动生成inquiry弹框询问 suffix:用于变更复制的数据的Key的数组，suffixV<stringFunction>：用于如何处理suffix中的值 EP:(v)=>{v+'-Copy'}Object{type: 'auto',suffix: 'name',suffixV: '-Copy'},{type: 'inquiry'}null
rowFixData固定行数据Array:----:null
levelFlag父子层级特殊固定关系标记start=0,++（非固定层级关系慎用） EP:levelFlag="{0:'年',1:'月',2:'周'}"Object:----:null
headerTipInfo特殊说明如树结构全选不包含子数据Object参考 el-tooptip {className: 's',effect: 'dark',content: '全选仅选择最外层',placement: 'top'},headerTipInfo: {effect: 'dark',placement: 'top'},
rowDragOptions拖拽 sortable.optionsObject参考 sortable:rowDragOptions="{animation: 300}"
columnDragOptions同上Object参考 sortable:columnDragOptions="{animation: 300}"

Table Events

事件名说明参数
fixRow-contextmenu固定行右击row, column, event
fixRow-click固定行单击row, column, event
fixRow-dbclick固定行双击row, column, event
columnDropOnEnd列拖动结束回调 args1sortable.onEnd args2-newProp、oldProp 列prop值， 附加说明：如果用了勾选此时newIndex,和oldIndex与数据中index不相同（+-1关系）或者使用多级表头，此时使用new-old-Prop来定位拖动到是哪一列是最准确的columnDropOnEnd({newIndex,oldIndex},{newProp,oldProp})
rowDropOnEnd行拖动结束回调 (args1\<sortable.onEnd>,args2) args2: {oldRow: 拖拽row, copyRow: 复制row 《1，Id变动原id+-Copy，2新增属性isDropCopyed: true》, parent: {row: 拖拽结束落点的父节点row, 根节点为null,newIndex: 拖拽结束落点的下标}}args1,args2
overrideRowDropOnEnd重写行拖拽(args1)args1 sortable.onEnd
overrideColumnDropOnEnd重写列拖拽(args1)args1 sortable.onEnd

CMenu

CMenu Attributes

参数说明类型可选值默认值
show显示&隐藏Booleanfalse
top位置Number
left位置Number
right位置Number
bottom位置Number
menuItems自定义子内容Array\<CMenuListItem>

CMenu

参数说明类型可选值默认值
show显示&隐藏Booleanfalse
top位置Number
left位置Number
right位置Number
bottom位置Number
menuItems自定义子内容Array\<CMenuListItem>

功能介绍

1. 行拖拽，列拖拽，行拖拽复制
2. 固定行，固定行伸缩，固定列
3.

功能截图

cut

vueelement-uitree-tablerow-fixeddrag-rowdrag-column
babel-plugin-add-module-exportscore-jselement-uimomentsass-loadersortablejsvue
@infinitebrahmanuniverse/nolb-cel@everything-registry/sub-chunk-1305
0.3.8

3 years ago

0.3.6

3 years ago

0.3.7

3 years ago

0.3.5

3 years ago

0.3.4

3 years ago

0.3.3

3 years ago

0.3.2

3 years ago

0.3.0

3 years ago

0.3.1

3 years ago

0.2.9

3 years ago

0.2.8

3 years ago

0.2.7

3 years ago

0.2.6

3 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.2.3

3 years ago

0.2.2

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago