umy-ui 表格键盘导航

编辑表格无需鼠标，直接键盘操作就可以，很方便

设置 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官网