canvas-table

使用说明

		const table = new CanvasTable({
			container: document.querySelector('#container'), // 挂载dom
			columns: [{ // 列配置
				title: 'Name',  // 列头 可以传入函数渲染函数
				dataIndex: 'name', // string 列数据获取字段
				width: 200, // 列宽 当有children列的时候，此数据会被覆盖
				editable: true, // 是否可以编辑 可以传入函数
				fixed: null, // 固定列 left/right 默认null不固定
				popTitle: 'Name', // 列头pop提示文案 默认为title
				key: 'name', // 列key
				align: 'left',// 'left' | 'right' | 'center' 默认left
				resizable: false, // 是否可以拖动列宽 默认false
				valueSetter({ record, column, name, value, index, section }) {}, // 设置值
				renderEditer({ record, column, value, index, section, closeWapper }) {}, // 编辑器渲染
				valueFormatter({ record, column, name, value, index, section }) {}, // 值格式化
				render({ record, column, value, index, section }) {},// 表体单元格渲染
				children: [],
			}],
			draggable: {
				header: false, // 是否开启拖动列开关 默认false
				body: false, // 是否开启拖动行开关 默认false
				footer: false, // 是否开启拖动行开关 默认false
				onDraggableEnd: ({record,  index, section}) => { // 拖拽结束
					console.log('拖拽结束', record, index, section)
				}
			} || faslse, // 拖动开关 默认false	
			editable: false , // 是否可以编辑总开关 默认false 此开关关闭时，所有列的editable都为false
			scrollToLeftOnChange: false, // 是否开启滚动到左侧开关 默认false
			scrollToTopOnChange: false, // 是否开启滚动到底部开关 默认false
			style: { // 默认样式
				height: '100%', // 高度
				width: '100%', // 宽度
				rowHeight: 32, // 行高
				columnWidth: 150, // 默认列宽 列配置里面没有传值时使用
				borderColor: '#e8e8e8', // 边框颜色
				textColor: 'rgba(0,0,0,0.65)', // 字体颜色
				fontSize: '14px', // 字体大小
				fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"', // 字体
				headerBackColor: '#fafafa', // 表头背景色
				headerRowHeight: 32, // 表头行高
				footerBackColor: '#fafafa', // 表尾背景色
				bodyBackColor: '#FFFFFF', // 表体背景色
				padding: 16, // 表格内边距
				minColumnWidth: 10, // 列宽最小值
				hoverRowBackColor: '#e6f7ff', // 悬浮行背景色
				activeRowBackColor: '#e6f7ff', // 激活行背景色
				editerBorderColor: '#1447ff', // 编辑器边框颜色
				scrollWidth: 18 // 滚动条宽度
			},
			source: [], // 表体数据
			footerSource: [], // 表尾数据
			onScrollTop: () => {
				console.log('滚动到顶部')	
			},
			onScrollLoadingAnimation: true // 滚动加载动画开关 默认传入onScrollLoad的时候就默认开启
			onScrollLoad: () => {
				console.log('滚动加载')
				return Promise.resolve()
			},
			scrollLoadHeight: 0, // 滚动加载触发高度 默认0
			onRow: (record, index) => { // 行事件
				return {
					onClick: () => {
						console.log('点击行', record, index)
					},
					onDoubleClick: () => {
						console.log('双击行', record, index)
					},
					onContextMenu: () => {
						console.log('右键行', record, index)
					},
					onMouseEnter: () => {
						console.log('鼠标进入行', record, index)
					},
					onMouseLeave: () => {
						console.log('鼠标离开行', record, index)
					},
					onMouseDown: () => {
						console.log('鼠标按下行', record, index)
					}
				}
			},
			onResizeEnd: (columns: HeaderTreeNode) => {
				console.log('列宽改变', columns)
			},
			startEditerCallback: ({ record, column, name, value, index, section }) => {
				console.log('开始编辑', record, column, name, value, index, section)
			}
		})
		const createData = (count) => {
			return new Array(count).fill(0).map((item, index) => {
				return {
					name: 'John' + index,
					age: 30,
					city: 'New York',
				}
			})
		}
		const data = createData(1000) // 插入表体数据
		table.columns = [] // 更新列配置
		table.source = data // 更新表体数据
		table.footerSource = data[0] // 更新表尾数据
		table.bodyMergedCells = [{ // 表体合并单元格
			fromCol: 0
			fromRow: 0
			toCol: 0
			toRow: 0
		}]
		table.footerMergedCells = [] // 表尾合并单元格 同理
		table.columns // 获取列配置
		table.source // 获取表体数据
		table.footerSource // 获取表尾数据
		table.bodyMergedCells // 获取表体合并单元格
		table.footerMergedCells // 获取表尾合并单元格
		table.render() // 更新渲染
		table.destroy() // 销毁实例
		table.stopRender() // 停止渲染 可以配合startRender使用
		table.startRender() // 继续渲染 可以配合stopRender使用 执行后再执行table.render()可以成功
		table.focusBodyCell(rowIndex, colKey) // 聚焦表体单元格
		table.focusFooterCell(rowIndex, colKey) // 聚焦表尾单元格
		// 当普通显示不能满足要求，可以使用以下组件
		CanvasTable.Button // 按钮组件 配合render使用
		CanvasTable.Text // 文本组件 配合render使用
		CanvasTable.Svg // svg组件 配合render使用
		CanvasTable.Img // 图片组件 配合render使用
		CanvasTable.CustomLayer // 自定义层组件 配合render使用
		CanvasTable.Layer // 层组件 配合render使用
		CanvasTable.Editer // 编辑器组件 配合renderEditer使用 renderEditer返回一个此类的子类或者一个此类的实例既可