2021-07-31

vxe-table表格键盘鼠标事件

最近在用vxe-table表格添加键盘事件时遇见一个坑分享一下。看完如果有用记得点赞哦

<vxe-table  
            :mouse-config="{ selected: true }"
            :keyboard-config="{
            isArrow: true,
            isEnter: true,
            }"
            :data="choosePaging.data"
            >
          <vxe-table-column type="checkbox" width="40"></vxe-table-column>
          <vxe-table-column field="备注" title="备注"></vxe-table-column>
</vxe-table>

mouse-config：添加鼠标事件时使用
keyboard-config：添加键盘事件时使用。
注意(使用键盘事件，鼠标事件时mouse-config="{selected:true}"必须设置)

鼠标事件:

selected:开启单元格选中功能
area 是否开启鼠标单元格区域选取
extension 只对 area 启用后有效，是否开启区域扩展选取功能，开启后可以通过鼠标左键按住区域内右下角扩展按钮，将区域横向或纵向扩大

键盘事件

isArrow 开启方向键功能
isDel 开启删除键功能
isEnter 开启回车键功能
isTab 开启 Tab 键功能
isEdit 开启任意键进入编辑（功能键除外）
isMerge 如果功能被支持，用于 mouse-config.area，开启合并和取消合并功能
isClip 如果功能被支持，用于 mouse-config.area，开启复制、剪贴、粘贴功能
isFNR 如果功能被支持，用于 mouse-config.area，开启查找和替换功能
isChecked 如果功能被支持，用于 column.type=checkbox|radio，开启空格键切换复选框或单选框状态功能
enterToTab 是否将回车键行为改成 Tab 键行为
delMethod 只对 isDel=true 有效，用于删除键清空单元格内容方法
backMethod 只对 isDel=true 有效，用于重写回退键清空单元格内容并激活为编辑状态方法
editMethod 只对 isEdit=true 有效，用于重写编辑单元格方法