编辑表格无需鼠标，直接键盘操作就可以，很方便
设置 mouse-config={selected: true} 启用单元格选中功能（只能用于 edit-config={mode: 'cell' } 有效）
设置 keyboard-config={isArrow: true, isDel: true, isEnter: true, isTab: true, isEdit: true} 启用按键功能及任意键编辑功能，方向键、回车键、Tab 键、Esc 键、F2 键、Del、Back 键
通过事件edit-currently-active可以获取到当前激活的单元格
注：当你选中了单元格，然后你按下任意键就可以获取焦点进行编辑,除了功能键，默认直接清空内容
注：当输入框是编辑状态，可以通过tab按键来切换单元格，不可以使用上下左右按钮来切换单元格，因为此时是编辑状态
注：当不是编辑状态，你可以通过上下左右按钮来切换单元格
注：当输入框是编辑状态，你可以使用失去焦点或者按下esc按键退出编辑状态
注：下面纯属示例写了2列，你可以多列，可以多行
注：不喜欢那个单元格选中的边框线，自己去改样式，直接修改 .elx-table .elx-body--column.col--selected:not(.col--checked) 这个路径的样式自己去覆盖
demo页面代码：
<template>
<div>
<h3>键盘导航</h3>
<p>设置 mouse-config={selected: true} 启用单元格选中功能（只能用于 edit-config={mode: 'cell' } 有效）</p>
<p>设置 keyboard-config={isArrow: true, isDel: true, isEnter: true, isTab: true, isEdit: true} 启用按键功能及任意键编辑功能，方向键、回车键、Tab 键、Esc 键、F2 键、Del、Back 键</p>
<p>通过事件edit-currently-active可以获取到当前激活的单元格</p>
<p>注：当你选中了单元格，然后你按下任意键就可以获取焦点进行编辑,除了功能键，默认直接清空内容</p>
<p>注：当输入框是编辑状态，可以通过tab按键来切换单元格，不可以使用上下左右按钮来切换单元格，因为此时是编辑状态</p>
<p>注：当不是编辑状态，你可以通过上下左右按钮来切换单元格</p>
<p>注：当输入框是编辑状态，你可以使用失去焦点或者按下esc按键退出编辑状态</p>
<p>注：下面纯属示例写了2列，你可以多列，可以多行</p>
<p>注：不喜欢那个单元格选中的边框线，自己去改样式，直接修改 .elx-table .elx-body--column.col--selected:not(.col--checked) 这个路径的样式自己去覆盖</p>
<p><a href="https://github.com/u-leo/umy-ui/blob/master/examples/pages/umycomponent/keyboard.vue" target="_blank">点击查看当前demo页面的代码</a></p>
<ux-grid border
show-overflow
ref="plxTable"
keep-source
height="500"
:data="tableData"
:highlightCurrentRow="false"
:mouse-config="{selected: true}"
:keyboard-config="{isArrow: true, isDel: true, isEnter: true, isTab: true, isEdit: true}"
@edit-currently-active="editCurrentlyActive"
:edit-config="{trigger: 'click', mode: 'cell'}">
<ux-table-column type="checkbox" width="60"></ux-table-column>
<!--autofocus，如果是自定义渲染可以指定聚焦的选择器，他的作用很明显就是你点击一下就帮你去获取焦点。
你无需点击第二次再去获取焦点。autofocus的值就是你编辑型输入框（edit）组件的类名-->
<ux-table-column field="name" title="名字" width="140" :edit-render="{autofocus: '.el-input__inner'}">
<template v-slot:edit="scope">
<!--autofocus绑定的类名就是这个组件的class类名。帮助获取输入框焦点-->
<el-input v-model="scope.row.name"></el-input>
</template>
<!--写非编辑状态下的样式, 看最底部的style样式部分吧 有写my-input-sc样式哦-->
<template v-slot="scope">
<span class="my-input-sc">{{ scope.row.name }}</span>
</template>
</ux-table-column>
<ux-table-column field="age" title="年龄" :edit-render="{autofocus: '.el-input__inner'}">
<template v-slot:edit="{ row }">
<el-input
v-model="row.age"
type="number"
placeholder="请输入内容"
style="width: 100%"></el-input>
</template>
<!--写非编辑状态下的样式, 看最底部的style样式部分吧 有写my-input-sc样式哦-->
<template v-slot="scope">
<span class="my-input-sc">{{ scope.row.age }}</span>
</template>
</ux-table-column>
</ux-grid>
<div style="margin-top: 20px">
<p> keyboard-config 按键配置：</p>
<p> ArrowUp （isArrow）如果存在，则移动到上面的单元格 </p>
<p> Shift + ArrowUp （isArrow）如果存在，则往上面延伸单元格区域 </p>
<p> ArrowDown （isArrow）如果存在，则移动到下面的单元格 </p>
<p> Shift + ArrowDown （isArrow）如果存在，则往下面延伸单元格区域 </p>
<p> ArrowLeft （isArrow）如果存在，则移动到左边的单元格 </p>
<p> Shift + ArrowLeft （isArrow）如果存在，则往左边延伸单元格区域 </p>
<p> ArrowRight （isArrow）如果存在，则移动到右边的单元格 </p>
<p> Shift + ArrowRight （isArrow）如果存在，则往右边延伸单元格区域 </p>
<p> Tab （isTab）如果存在，则移动到右边单元格；如果存在区域，则在指定区域内移动；如果移动到最后一列，则从下一行开始移到，以此循环 </p>
<p> Tab + Shift （isTab）如果存在，则移动到左边单元格，则在指定区域内移动；如果移动到第一列，则从上一行开始移到，以此循环 </p>
<p> Enter （isEnter）如果存在，取消单元格编辑并移动到下面的单元格，则在指定区域内移动；如果移动到最后一行，则从下一列开始移到，以此循环 </p>
<p> Enter + Shift （isEnter）如果存在，取消单元格编辑并移动到上面的单元格，则在指定区域内移动；如果移动到第一行，则从上一列开始移到，以此循环 </p>
<p> Escape 如果存在，取消单元格编辑状态 </p>
<p> Delete （isDel）清空单元格内容 </p>
<p> Backspace （isDel）清空单元格内容并激活为编辑状态 </p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
tableData: []
}
},
mounted () {
// 延迟加载
this.tableData = Array.from({ length: 10 }, (_, idx) => ({
id: idx + 1,
date: '2016-05-03',
name: '张三' + idx,
sex: 'nan',
age: 18 + idx
}))
},
methods: {
editCurrentlyActive ({row, column, cell}) {
console.log({row, column, cell})
}
}
}
</script>
<style scoped lang="scss">
.my-input-sc {
display: inline-block;
height: $default-height;
line-height: 30px;
-webkit-appearance: none;
background-color: #FFFFFF;
background-image: none;
border-radius: 4px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #606266;
font-size: inherit;
outline: none;
padding: 0 15px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
}
</style>
To：umy-ui官网