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-key	Boolean	:----:	false
columnDrag	列拖拽	Boolean	:----:	false
rowDropCopy	行拖拽复制依赖rowDrag=true auto自动生成inquiry弹框询问 suffix:用于变更复制的数据的Key的数组，suffixV<string	Function>：用于如何处理suffix中的值 EP:(v)=>{v+'-Copy'}	Object	{type: 'auto',suffix: ['name'],suffixV: '-Copy'},{type: 'inquiry'}
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.options	Object	参考 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	列拖动结束回调 args1[sortable.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	显示&隐藏	Boolean		false
top	位置	Number
left	位置	Number
right	位置	Number
bottom	位置	Number
menuItems	自定义子内容	Array<CMenuListItem>

CMenu

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

功能介绍

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

功能截图