# Table-editor 全键盘表格 beta

# 代码演示

# API

# Table-editor Attributes

参数	说明	类型	可选值	默认值	Version
data	显示的数据	Array	—	[]
filled-column	编辑时使表单组件撑满单元格	Boolean	—	false
size	Table 的尺寸	String	'medium' | 'small' | 'mini'	mini
width	Table 的宽度	String | Number	—	—
height	Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 String 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。	String | Number	—	—
max-height	Table 的最大高度。合法的值为数字或者单位为 px 的高度。	String | Number	—	—
fit	列的宽度是否自撑开	Boolean	—	true
border	是否带有纵向边框	Boolean	—	true
row-key	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形结构数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。	Function(row) | String	—	—
context	上下文数据，用于传递给列的作用域插槽	—	—	—
show-header	是否显示表头	Boolean	—	true
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function({row, rowIndex}) | String	—	—
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	Function({row, rowIndex}) | Object	—	—
cell-class-name	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex}) | String	—	—
cell-style	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex}) | Object	—	—
header-row-class-name	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。	Function({row, rowIndex}) | String	—	—
header-row-style	表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。	Function({row, rowIndex}) | Object	—	—
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex}) | String	—	—
header-cell-style	表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex}) | Object	—	—
highlight-current-row	是否要高亮当前行	Boolean	—	true
highlight-selection-row	是否要高亮复选框选中行（仅针对开启 selection 有效）	Boolean	—	false
current-row-key	当前行的 key，只写属性	String,Number	—	—
empty-text	空数据时显示的文本内容，也可以通过 slot="empty" 设置	String	—	暂无数据
tooltip-effect	tooltip theme 属性	String	'dark' | 'light'	—
span-method	合并行或列的计算方法	Function({ row, column, rowIndex, columnIndex })	—	—
select-on-indeterminate	在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行	Boolean	—	true
enter-to-next-row	键盘导航配置，回车键是否跳转到下一行。为 true 时，回车键按下后跳转到下一行；为 false 时，回车键按下后跳转到右侧单元格	Boolean	—	true

# Table-editor Events

事件名	说明	参数	Version
current-cell-change	当前单元格发生变化时触发	cell, oldCell
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow, oldCurrentRow
cell-mouse-enter	当单元格 hover 进入时会触发该事件	row, column, cell, event
cell-mouse-leave	当单元格 hover 退出时会触发该事件	row, column, cell, event
cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
cell-dblclick	当某个单元格被双击击时会触发该事件	row, column, cell, event
header-click	当某一列的表头被点击时会触发该事件	column, event
header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	column, event
row-click	当某一行被点击时会触发该事件	row, column, event, rowIndex
row-contextmenu	当某一行被鼠标右键点击时会触发该事件	row, column, event, rowIndex
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
selection-change	当选择项发生变化时会触发该事件	selection

# Table-editor Methods

方法名	说明	参数	Version
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	row
setCurrentCell	设置当前选中的单元格	(rowIndex: number, columnIndex: number)
getCurrentCell	获取当前选中的单元格	—
clearSelection	用于多选表格，清空用户的选择	—
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected
doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法	—

# Table-editor Slot

name	说明	Version
append	插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。
empty	空数据时的自定义内容

# Table-editor-column Scoped Slot

name	说明	Version
—	自定义列的内容，参数为 { row, column, $index, isActive }
header	自定义表头的内容. 参数为 { column, $index }